add theme style files

* Use eslint-plugin-vue to lint vue files

.eslintrc.js

@@ -5,9 +5,16 @@ module.exports = {
         "jasmine": true,
         "amd": true
     },
-    "extends": "eslint:recommended",
-    "parser": "babel-eslint",
+    "globals": {
+        "_": "readonly"
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/recommended"
+    ],
+    "parser": "vue-eslint-parser",
     "parserOptions": {
+        "parser": "babel-eslint",
         "allowImportExportEverywhere": true,
         "ecmaVersion": 2015,
         "ecmaFeatures": {
@@ -58,7 +65,38 @@ module.exports = {
             }
         ],
         "dot-notation": "error",
-        "indent": ["error", 4]
+        "indent": ["error", 4],
+        "vue/html-indent": [
+            "error",
+            4,
+            {
+                "attribute": 1,
+                "baseIndent": 0,
+                "closeBracket": 0,
+                "alignAttributesVertically": true,
+                "ignores": []
+            }
+        ],
+        "vue/html-self-closing": ["error",
+            {
+                "html": {
+                    "void": "never",
+                    "normal": "never",
+                    "component": "always"
+                },
+                "svg": "always",
+                "math": "always"
+            }
+        ],
+        "vue/max-attributes-per-line": ["error", {
+            "singleline": 1,
+            "multiline": {
+                "max": 1,
+                "allowFirstLine": true
+            }
+        }],
+        "vue/multiline-html-element-content-newline": "off",
+        "vue/singleline-html-element-content-newline": "off"
     },
     "overrides": [
         {

example/eventGenerator/bundle.js

@@ -22,59 +22,60 @@
 /*global define*/
 
 define([
-    "./src/EventTelemetryProvider",
-    'legacyRegistry'
+    "./src/EventTelemetryProvider"
 ], function (
-    EventTelemetryProvider,
-    legacyRegistry
+    EventTelemetryProvider
 ) {
     "use strict";
 
-    legacyRegistry.register("example/eventGenerator", {
-        "name": "Event Message Generator",
-        "description": "For development use. Creates sample event message data that mimics a live data stream.",
-        "extensions": {
-            "components": [
-                {
-                    "implementation": EventTelemetryProvider,
-                    "type": "provider",
-                    "provides": "telemetryService",
-                    "depends": [
-                        "$q",
-                        "$timeout"
-                    ]
-                }
-            ],
-            "types": [
-                {
-                    "key": "eventGenerator",
-                    "name": "Event Message Generator",
-                    "cssClass": "icon-generator-events",
-                    "description": "For development use. Creates sample event message data that mimics a live data stream.",
-                    "priority": 10,
-                    "features": "creation",
-                    "model": {
-                        "telemetry": {}
-                    },
-                    "telemetry": {
-                        "source": "eventGenerator",
-                        "domains": [
-                            {
-                                "key": "utc",
-                                "name": "Timestamp",
-                                "format": "utc"
-                            }
-                        ],
-                        "ranges": [
-                            {
-                                "key": "message",
-                                "name": "Message",
-                                "format": "string"
-                            }
+    return {
+        name:"example/eventGenerator",
+        definition: {
+            "name": "Event Message Generator",
+            "description": "For development use. Creates sample event message data that mimics a live data stream.",
+            "extensions": {
+                "components": [
+                    {
+                        "implementation": EventTelemetryProvider,
+                        "type": "provider",
+                        "provides": "telemetryService",
+                        "depends": [
+                            "$q",
+                            "$timeout"
                         ]
                     }
-                }
-            ]
+                ],
+                "types": [
+                    {
+                        "key": "eventGenerator",
+                        "name": "Event Message Generator",
+                        "cssClass": "icon-generator-events",
+                        "description": "For development use. Creates sample event message data that mimics a live data stream.",
+                        "priority": 10,
+                        "features": "creation",
+                        "model": {
+                            "telemetry": {}
+                        },
+                        "telemetry": {
+                            "source": "eventGenerator",
+                            "domains": [
+                                {
+                                    "key": "utc",
+                                    "name": "Timestamp",
+                                    "format": "utc"
+                                }
+                            ],
+                            "ranges": [
+                                {
+                                    "key": "message",
+                                    "name": "Message",
+                                    "format": "string"
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/eventGenerator/src/EventTelemetry.js

@@ -48,11 +48,11 @@ define(
                         (domain !== 'delta' ? firstObservedTime : 0);
             };
 
-	        generatorData.getRangeValue = function (i, range) {
-		        var domainDelta = this.getDomainValue(i) - firstObservedTime,
+            generatorData.getRangeValue = function (i, range) {
+                var domainDelta = this.getDomainValue(i) - firstObservedTime,
                     ind = i % messages.length;
                 return messages[ind] + " - [" + domainDelta.toString() + "]";
-	        };
+            };
 
             return generatorData;
         }

example/eventGenerator/src/EventTelemetryProvider.js

@@ -34,11 +34,9 @@ define(
          * @constructor
          */
         function EventTelemetryProvider($q, $timeout) {
-            var
-	            subscriptions = [],
-	            genInterval = 1000,
-                generating = false,
-                id = Math.random() * 100000;
+            var subscriptions = [],
+                genInterval = 1000,
+                generating = false;
 
             //
             function matchesSource(request) {
@@ -47,7 +45,6 @@ define(
 
             // Used internally; this will be repacked by doPackage
             function generateData(request) {
-	            //console.log("generateData " + (Date.now() - startTime).toString());
                 return {
                     key: request.key,
                     telemetry: new EventTelemetry(request, genInterval)

example/export/ExportTelemetryAsCSVAction.js

@@ -58,15 +58,15 @@ define([], function () {
                 row,
                 i;
 
-            function copyDomainsToRow(row, index) {
+            function copyDomainsToRow(telemetryRow, index) {
                 domains.forEach(function (domain) {
-                    row[domain.name] = series.getDomainValue(index, domain.key);
+                    telemetryRow[domain.name] = series.getDomainValue(index, domain.key);
                 });
             }
 
-            function copyRangesToRow(row, index) {
+            function copyRangesToRow(telemetryRow, index) {
                 ranges.forEach(function (range) {
-                    row[range.name] = series.getRangeValue(index, range.key);
+                    telemetryRow[range.name] = series.getRangeValue(index, range.key);
                 });
             }
 

example/export/bundle.js

@@ -22,24 +22,26 @@
 /*global define*/
 
 define([
-    'legacyRegistry',
     './ExportTelemetryAsCSVAction'
-], function (legacyRegistry, ExportTelemetryAsCSVAction) {
+], function (ExportTelemetryAsCSVAction) {
     "use strict";
 
-    legacyRegistry.register("example/export", {
-        "name": "Example of using CSV Export",
-        "extensions": {
-            "actions": [
-                {
-                    "key": "example.export",
-                    "name": "Export Telemetry as CSV",
-                    "implementation": ExportTelemetryAsCSVAction,
-                    "category": "contextual",
-                    "cssClass": "icon-download",
-                    "depends": [ "exportService" ]
-                }
-            ]
+    return {
+        name:"example/export",
+        definition: {
+            "name": "Example of using CSV Export",
+            "extensions": {
+                "actions": [
+                    {
+                        "key": "example.export",
+                        "name": "Export Telemetry as CSV",
+                        "implementation": ExportTelemetryAsCSVAction,
+                        "category": "contextual",
+                        "cssClass": "icon-download",
+                        "depends": ["exportService"]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/forms/bundle.js

@@ -22,32 +22,33 @@
 /*global define*/
 
 define([
-    "./src/ExampleFormController",
-    'legacyRegistry'
+    "./src/ExampleFormController"
 ], function (
-    ExampleFormController,
-    legacyRegistry
+    ExampleFormController
 ) {
     "use strict";
 
-    legacyRegistry.register("example/forms", {
-        "name": "Declarative Forms example",
-        "sources": "src",
-        "extensions": {
-            "controllers": [
-                {
-                    "key": "ExampleFormController",
-                    "implementation": ExampleFormController,
-                    "depends": [
-                        "$scope"
-                    ]
-                }
-            ],
-            "routes": [
-                {
-                    "templateUrl": "templates/exampleForm.html"
-                }
-            ]
+    return {
+        name:"example/forms",
+        definition: {
+            "name": "Declarative Forms example",
+            "sources": "src",
+            "extensions": {
+                "controllers": [
+                    {
+                        "key": "ExampleFormController",
+                        "implementation": ExampleFormController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    }
+                ],
+                "routes": [
+                    {
+                        "templateUrl": "templates/exampleForm.html"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/generator/GeneratorProvider.js

@@ -52,7 +52,7 @@ define([
             'period',
             'offset',
             'dataRateInHz',
-            'phase',
+            'phase'
         ];
 
         request = request || {};

example/generator/SinewaveLimitProvider.js

@@ -28,7 +28,7 @@ define([
 ) {
 
     var RED = {
-            sin: 0.9, 
+            sin: 0.9,
             cos: 0.9
         },
         YELLOW = {
@@ -74,7 +74,7 @@ define([
         return {
             evaluate: function (datum, valueMetadata) {
                 var range = valueMetadata && valueMetadata.key;
-                
+
                 if (datum[range] > RED[range]) {
                     return LIMITS.rh;
                 }

example/generator/WorkerInterface.js

@@ -89,7 +89,7 @@ define([
     WorkerInterface.prototype.subscribe = function (request, cb) {
         function callback(message) {
             cb(message.data);
-        };
+        }
 
         var messageId = this.dispatch('subscribe', request, callback);
 

example/generator/generatorWorker.js

@@ -84,10 +84,10 @@
 
     function onRequest(message) {
         var request = message.data;
-        if (request.end == undefined) {
+        if (request.end === undefined) {
             request.end = Date.now();
         }
-        if (request.start == undefined){
+        if (request.start === undefined) {
             request.start = request.end - FIFTEEN_MINUTES;
         }
 

example/generator/plugin.js

@@ -33,7 +33,7 @@ define([
     GeneratorMetadataProvider
 ) {
 
-    return function(openmct){
+    return function (openmct) {
 
         openmct.types.addType("example.state-generator", {
             name: "State Generator",

example/identity/bundle.js

@@ -22,27 +22,28 @@
 /*global define*/
 
 define([
-    "./src/ExampleIdentityService",
-    'legacyRegistry'
+    "./src/ExampleIdentityService"
 ], function (
-    ExampleIdentityService,
-    legacyRegistry
+    ExampleIdentityService
 ) {
     "use strict";
 
-    legacyRegistry.register("example/identity", {
-        "extensions": {
-            "components": [
-                {
-                    "implementation": ExampleIdentityService,
-                    "provides": "identityService",
-                    "type": "provider",
-                    "depends": [
-                        "dialogService",
-                        "$q"
-                    ]
-                }
-            ]
+    return {
+        name:"example/identity",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "implementation": ExampleIdentityService,
+                        "provides": "identityService",
+                        "type": "provider",
+                        "depends": [
+                            "dialogService",
+                            "$q"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/imagery/plugin.js

@@ -22,31 +22,31 @@
 
 define([
 
-], function(
+], function (
 
 ) {
     function ImageryPlugin() {
 
         var IMAGE_SAMPLES = [
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
-                "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
-            ];
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18731.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18732.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18733.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18734.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18735.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18736.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18737.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18738.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18739.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18740.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18741.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18742.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18743.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18744.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18745.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18746.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18747.jpg",
+            "https://www.hq.nasa.gov/alsj/a16/AS16-117-18748.jpg"
+        ];
 
         function pointForTimestamp(timestamp, name) {
             return {
@@ -65,7 +65,7 @@ define([
                     callback(pointForTimestamp(Date.now(), domainObject.name));
                 }, 5000);
 
-                return function (interval) {
+                return function () {
                     clearInterval(interval);
                 };
             }

example/mobile/bundle.js

@@ -21,25 +21,22 @@
  *****************************************************************************/
 /*global define*/
 
-define([
-    
-    'legacyRegistry'
-], function (
-    
-    legacyRegistry
-) {
+define([], function () {
     "use strict";
 
-    legacyRegistry.register("example/mobile", {
-        "name": "Mobile",
-        "description": "Allows elements with pertinence to mobile usage and development",
-        "extensions": {
-            "stylesheets": [
-                {
-                    "stylesheetUrl": "css/mobile-example.css",
-                    "priority": "mandatory"
-                }
-            ]
+    return {
+        name:"example/mobile",
+        definition: {
+            "name": "Mobile",
+            "description": "Allows elements with pertinence to mobile usage and development",
+            "extensions": {
+                "stylesheets": [
+                    {
+                        "stylesheetUrl": "css/mobile-example.css",
+                        "priority": "mandatory"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/msl/bundle.js

@@ -24,92 +24,92 @@
 define([
     "./src/RemsTelemetryServerAdapter",
     "./src/RemsTelemetryModelProvider",
-    "./src/RemsTelemetryProvider",
-    'legacyRegistry',
-    "module"
+    "./src/RemsTelemetryProvider"
 ], function (
     RemsTelemetryServerAdapter,
     RemsTelemetryModelProvider,
-    RemsTelemetryProvider,
-    legacyRegistry
+    RemsTelemetryProvider
 ) {
     "use strict";
-    legacyRegistry.register("example/msl", {
-        "name" : "Mars Science Laboratory Data Adapter",
-        "extensions" : {
-            "types": [
-                {
-                    "name":"Mars Science Laboratory",
-                    "key": "msl.curiosity",
-                    "cssClass": "icon-object"
-                },
-                {
-                    "name": "Instrument",
-                    "key": "msl.instrument",
-                    "cssClass": "icon-object",
-                    "model": {"composition": []}
-                },
-                {
-                    "name": "Measurement",
-                    "key": "msl.measurement",
-                    "cssClass": "icon-telemetry",
-                    "model": {"telemetry": {}},
-                    "telemetry": {
-                        "source": "rems.source",
-                        "domains": [
-                            {
-                                "name": "Time",
-                                "key": "utc",
-                                "format": "utc"
-                            }
-                        ]
+    return {
+        name:"example/msl",
+        definition: {
+            "name" : "Mars Science Laboratory Data Adapter",
+            "extensions" : {
+                "types": [
+                    {
+                        "name":"Mars Science Laboratory",
+                        "key": "msl.curiosity",
+                        "cssClass": "icon-object"
+                    },
+                    {
+                        "name": "Instrument",
+                        "key": "msl.instrument",
+                        "cssClass": "icon-object",
+                        "model": {"composition": []}
+                    },
+                    {
+                        "name": "Measurement",
+                        "key": "msl.measurement",
+                        "cssClass": "icon-telemetry",
+                        "model": {"telemetry": {}},
+                        "telemetry": {
+                            "source": "rems.source",
+                            "domains": [
+                                {
+                                    "name": "Time",
+                                    "key": "utc",
+                                    "format": "utc"
+                                }
+                            ]
+                        }
                     }
-                }
-            ],
-            "constants": [
-                {
-                    "key": "REMS_WS_URL",
-                    "value": "/proxyUrl?url=http://cab.inta-csic.es/rems/wp-content/plugins/marsweather-widget/api.php"
-                }
-            ],
-            "roots": [
-                {
-                    "id": "msl:curiosity"
-                }
-            ],
-            "models": [
-                {
-                    "id": "msl:curiosity",
-                    "priority": "preferred",
-                    "model": {
-                        "type": "msl.curiosity",
-                        "name": "Mars Science Laboratory",
-                        "composition": ["msl_tlm:rems"]
+                ],
+                "constants": [
+                    {
+                        "key": "REMS_WS_URL",
+                        "value": "/proxyUrl?url=http://cab.inta-csic.es/rems/wp-content/plugins/marsweather-widget/api.php"
                     }
-                }
-            ],
-            "services": [
-                {
-                    "key":"rems.adapter",
-                    "implementation": RemsTelemetryServerAdapter,
-                    "depends": ["$http", "$log", "REMS_WS_URL"]
-                }
-            ],
-            "components": [
-                {
-                    "provides": "modelService",
-                    "type": "provider",
-                    "implementation": RemsTelemetryModelProvider,
-                    "depends": ["rems.adapter"]
-                },
-                {
-                    "provides": "telemetryService",
-                    "type": "provider",
-                    "implementation": RemsTelemetryProvider,
-                    "depends": ["rems.adapter", "$q"]
-                }
-            ]
+                ],
+                "roots": [
+                    {
+                        "id": "msl:curiosity"
+                    }
+                ],
+                "models": [
+                    {
+                        "id": "msl:curiosity",
+                        "priority": "preferred",
+                        "model": {
+                            "type": "msl.curiosity",
+                            "name": "Mars Science Laboratory",
+                            "composition": ["msl_tlm:rems"]
+                        }
+                    }
+                ],
+                "services": [
+                    {
+                        "key":"rems.adapter",
+                        "implementation": RemsTelemetryServerAdapter,
+                        "depends": ["$http", "$log", "REMS_WS_URL"]
+                    }
+                ],
+                "components": [
+                    {
+                        "provides": "modelService",
+                        "type": "provider",
+                        "implementation": RemsTelemetryModelProvider,
+                        "depends": ["rems.adapter"]
+                    },
+                    {
+                        "provides": "telemetryService",
+                        "type": "provider",
+                        "implementation": RemsTelemetryProvider,
+                        "depends": ["rems.adapter", "$q"]
+                    }
+                ]
+            }
         }
-    });
+    };
 });
 

example/msl/src/MSLDataDictionary.js

@@ -76,4 +76,4 @@ define(
             ]
         };
     }
-);
+);

example/msl/src/RemsTelemetryModelProvider.js

@@ -22,7 +22,7 @@
 /*global define*/
 
 define(
-    function (){
+    function () {
         "use strict";
 
         var PREFIX = "msl_tlm:",
@@ -32,20 +32,20 @@ define(
                 string: "string"
             };
 
-        function RemsTelemetryModelProvider(adapter){
+        function RemsTelemetryModelProvider(adapter) {
 
             function isRelevant(id) {
                 return id.indexOf(PREFIX) === 0;
             }
 
-            function makeId(element){
+            function makeId(element) {
                 return PREFIX + element.identifier;
             }
 
-            function buildTaxonomy(dictionary){
+            function buildTaxonomy(dictionary) {
                 var models = {};
 
-                function addMeasurement(measurement, parent){
+                function addMeasurement(measurement, parent) {
                     var format = FORMAT_MAPPINGS[measurement.type];
                     models[makeId(measurement)] = {
                         type: "msl.measurement",
@@ -73,12 +73,12 @@ define(
                         location: spacecraftId,
                         composition: measurements.map(makeId)
                     };
-                    measurements.forEach(function(measurement) {
+                    measurements.forEach(function (measurement) {
                         addMeasurement(measurement, instrumentId);
                     });
                 }
 
-                (dictionary.instruments || []).forEach(function(instrument) {
+                (dictionary.instruments || []).forEach(function (instrument) {
                     addInstrument(instrument, "msl:curiosity");
                 });
                 return models;

example/msl/src/RemsTelemetryProvider.js

@@ -72,10 +72,10 @@ define (
          * This data source does not support real-time subscriptions
          */
         RemsTelemetryProvider.prototype.subscribe = function (callback, requests) {
-            return function() {};
+            return function () {};
         };
         RemsTelemetryProvider.prototype.unsubscribe = function (callback, requests) {
-            return function() {};
+            return function () {};
         };
 
         return RemsTelemetryProvider;

example/msl/src/RemsTelemetrySeries.js

@@ -54,8 +54,8 @@ define(
          * @returns {number} A count of the number of data values available in
          * this series
          */
-        RemsTelemetrySeries.prototype.getPointCount = function() {
-                    return this.data.length;
+        RemsTelemetrySeries.prototype.getPointCount = function () {
+            return this.data.length;
         };
         /**
          * The domain value at the given index. The Rems telemetry data is
@@ -64,8 +64,8 @@ define(
          * @param index
          * @returns {number} the time value in ms since 1 January 1970
          */
-        RemsTelemetrySeries.prototype.getDomainValue = function(index) {
-                    return this.data[index].date;
+        RemsTelemetrySeries.prototype.getDomainValue = function (index) {
+            return this.data[index].date;
         };
 
         /**
@@ -75,8 +75,8 @@ define(
          * value of.
          * @returns {number} A floating point number
          */
-        RemsTelemetrySeries.prototype.getRangeValue = function(index) {
-                    return this.data[index].value;
+        RemsTelemetrySeries.prototype.getRangeValue = function (index) {
+            return this.data[index].value;
         };
 
         return RemsTelemetrySeries;

example/msl/src/RemsTelemetryServerAdapter.js

@@ -68,18 +68,18 @@ define(
          * given request ID.
          * @private
          */
-        RemsTelemetryServerAdapter.prototype.requestHistory = function(request) {
+        RemsTelemetryServerAdapter.prototype.requestHistory = function (request) {
             var self = this,
                 id = request.key;
 
             var dataTransforms = this.dataTransforms;
 
-            function processResponse(response){
+            function processResponse(response) {
                 var data = [];
                 /*
                  * History data is organised by Sol. Iterate over sols...
                  */
-                response.data.soles.forEach(function(solData){
+                response.data.soles.forEach(function (solData) {
                     /*
                      * Check that valid data exists
                      */
@@ -106,13 +106,13 @@ define(
 
             //Filter results to match request parameters
             function filterResults(results) {
-                return results.filter(function(result){
+                return results.filter(function (result) {
                     return result.date >= (request.start || Number.MIN_VALUE) &&
                         result.date <= (request.end || Number.MAX_VALUE);
                 });
             }
 
-            function packageAndResolve(results){
+            function packageAndResolve(results) {
                 return {id: id, values: results};
             }
 
@@ -132,7 +132,7 @@ define(
          * @param id The telemetry data point key to be queried.
          * @returns {Promise | Array<RemsTelemetryValue>} that resolves with an Array of {@link RemsTelemetryValue} objects for the request data key.
          */
-        RemsTelemetryServerAdapter.prototype.history = function(request) {
+        RemsTelemetryServerAdapter.prototype.history = function (request) {
             return this.requestHistory(request);
         };
 

example/notifications/bundle.js

@@ -27,64 +27,65 @@ define([
     "./src/DialogLaunchIndicator",
     "./src/NotificationLaunchIndicator",
     "./res/dialog-launch.html",
-    "./res/notification-launch.html",
-    'legacyRegistry'
+    "./res/notification-launch.html"
 ], function (
     DialogLaunchController,
     NotificationLaunchController,
     DialogLaunchIndicator,
     NotificationLaunchIndicator,
     DialogLaunch,
-    NotificationLaunch,
-    legacyRegistry
+    NotificationLaunch
 ) {
     "use strict";
 
-    legacyRegistry.register("example/notifications", {
-        "extensions": {
-            "templates": [
-                {
-                    "key": "dialogLaunchTemplate",
-                    "template": DialogLaunch
-                },
-                {
-                    "key": "notificationLaunchTemplate",
-                    "template": NotificationLaunch
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "DialogLaunchController",
-                    "implementation": DialogLaunchController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "$log",
-                        "dialogService",
-                        "notificationService"
-                    ]
-                },
-                {
-                    "key": "NotificationLaunchController",
-                    "implementation": NotificationLaunchController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "$log",
-                        "notificationService"
-                    ]
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": DialogLaunchIndicator,
-                    "priority": "fallback"
-                },
-                {
-                    "implementation": NotificationLaunchIndicator,
-                    "priority": "fallback"
-                }
-            ]
+    return {
+        name:"example/notifications",
+        definition: {
+            "extensions": {
+                "templates": [
+                    {
+                        "key": "dialogLaunchTemplate",
+                        "template": DialogLaunch
+                    },
+                    {
+                        "key": "notificationLaunchTemplate",
+                        "template": NotificationLaunch
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "DialogLaunchController",
+                        "implementation": DialogLaunchController,
+                        "depends": [
+                            "$scope",
+                            "$timeout",
+                            "$log",
+                            "dialogService",
+                            "notificationService"
+                        ]
+                    },
+                    {
+                        "key": "NotificationLaunchController",
+                        "implementation": NotificationLaunchController,
+                        "depends": [
+                            "$scope",
+                            "$timeout",
+                            "$log",
+                            "notificationService"
+                        ]
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": DialogLaunchIndicator,
+                        "priority": "fallback"
+                    },
+                    {
+                        "implementation": NotificationLaunchIndicator,
+                        "priority": "fallback"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/notifications/src/DialogLaunchController.js

@@ -137,12 +137,12 @@ define(
                         " attention to an event.",
                         severity: "info",
                         primaryOption: {
-                                label: "OK",
-                                callback: function () {
-                                    $log.debug("OK Pressed");
-                                    dialog.dismiss();
-                                }
+                            label: "OK",
+                            callback: function () {
+                                $log.debug("OK Pressed");
+                                dialog.dismiss();
                             }
+                        }
                     };
 
                 dialog = dialogService.showBlockingMessage(model);

example/persistence/bundle.js

@@ -22,33 +22,34 @@
 /*global define*/
 
 define([
-    "./src/BrowserPersistenceProvider",
-    'legacyRegistry'
+    "./src/BrowserPersistenceProvider"
 ], function (
-    BrowserPersistenceProvider,
-    legacyRegistry
+    BrowserPersistenceProvider
 ) {
     "use strict";
 
-    legacyRegistry.register("example/persistence", {
-        "extensions": {
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "provider",
-                    "implementation": BrowserPersistenceProvider,
-                    "depends": [
-                        "$q",
-                        "PERSISTENCE_SPACE"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_SPACE",
-                    "value": "mct"
-                }
-            ]
+    return {
+        name:"example/persistence",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "provider",
+                        "implementation": BrowserPersistenceProvider,
+                        "depends": [
+                            "$q",
+                            "PERSISTENCE_SPACE"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_SPACE",
+                        "value": "mct"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/policy/bundle.js

@@ -22,24 +22,25 @@
 /*global define*/
 
 define([
-    "./src/ExamplePolicy",
-    'legacyRegistry'
+    "./src/ExamplePolicy"
 ], function (
-    ExamplePolicy,
-    legacyRegistry
+    ExamplePolicy
 ) {
     "use strict";
 
-    legacyRegistry.register("example/policy", {
-        "name": "Example Policy",
-        "description": "Provides an example of using policies to prohibit actions.",
-        "extensions": {
-            "policies": [
-                {
-                    "implementation": ExamplePolicy,
-                    "category": "action"
-                }
-            ]
+    return {
+        name:"example/policy",
+        definition: {
+            "name": "Example Policy",
+            "description": "Provides an example of using policies to prohibit actions.",
+            "extensions": {
+                "policies": [
+                    {
+                        "implementation": ExamplePolicy,
+                        "category": "action"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/profiling/bundle.js

@@ -23,33 +23,34 @@
 
 define([
     "./src/WatchIndicator",
-    "./src/DigestIndicator",
-    'legacyRegistry'
+    "./src/DigestIndicator"
 ], function (
     WatchIndicator,
-    DigestIndicator,
-    legacyRegistry
+    DigestIndicator
 ) {
     "use strict";
 
-    legacyRegistry.register("example/profiling", {
-        "extensions": {
-            "indicators": [
-                {
-                    "implementation": WatchIndicator,
-                    "depends": [
-                        "$interval",
-                        "$rootScope"
-                    ]
-                },
-                {
-                    "implementation": DigestIndicator,
-                    "depends": [
-                        "$interval",
-                        "$rootScope"
-                    ]
-                }
-            ]
+    return {
+        name:"example/profiling",
+        definition: {
+            "extensions": {
+                "indicators": [
+                    {
+                        "implementation": WatchIndicator,
+                        "depends": [
+                            "$interval",
+                            "$rootScope"
+                        ]
+                    },
+                    {
+                        "implementation": DigestIndicator,
+                        "depends": [
+                            "$interval",
+                            "$rootScope"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/scratchpad/bundle.js

@@ -22,42 +22,43 @@
 /*global define*/
 
 define([
-    "./src/ScratchPersistenceProvider",
-    'legacyRegistry'
+    "./src/ScratchPersistenceProvider"
 ], function (
-    ScratchPersistenceProvider,
-    legacyRegistry
+    ScratchPersistenceProvider
 ) {
     "use strict";
 
-    legacyRegistry.register("example/scratchpad", {
-        "extensions": {
-            "roots": [
-                {
-                    "id": "scratch:root"
-                }
-            ],
-            "models": [
-                {
-                    "id": "scratch:root",
-                    "model": {
-                        "type": "folder",
-                        "composition": [],
-                        "name": "Scratchpad"
-                    },
-                    "priority": "preferred"
-                }
-            ],
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "provider",
-                    "implementation": ScratchPersistenceProvider,
-                    "depends": [
-                        "$q"
-                    ]
-                }
-            ]
+    return {
+        name:"example/scratchpad",
+        definition: {
+            "extensions": {
+                "roots": [
+                    {
+                        "id": "scratch:root"
+                    }
+                ],
+                "models": [
+                    {
+                        "id": "scratch:root",
+                        "model": {
+                            "type": "folder",
+                            "composition": [],
+                            "name": "Scratchpad"
+                        },
+                        "priority": "preferred"
+                    }
+                ],
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "provider",
+                        "implementation": ScratchPersistenceProvider,
+                        "depends": [
+                            "$q"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

example/scratchpad/src/ScratchPersistenceProvider.js

@@ -60,7 +60,7 @@ define(
         ScratchPersistenceProvider.prototype.readObject = function (space, key) {
             return this.$q.when(
                 (space === 'scratch' && this.table[key]) ?
-                        JSON.parse(this.table[key]) : undefined
+                    JSON.parse(this.table[key]) : undefined
             );
         };
 

example/simpleVuePlugin/plugin.js

@@ -1,10 +1,8 @@
 import Vue from 'Vue';
 import HelloWorld from './HelloWorld.vue';
 
-function SimpleVuePlugin () {
+function SimpleVuePlugin() {
     return function install(openmct) {
-        var views = (openmct.mainViews || openmct.objectViews);
-
         openmct.types.addType('hello-world', {
             name: 'Hello World',
             description: 'An introduction object',

example/styleguide/bundle.js

@@ -8,8 +8,7 @@ define([
     "./res/templates/glyphs.html",
     "./res/templates/controls.html",
     "./res/templates/input.html",
-    "./res/templates/menus.html",
-    'legacyRegistry'
+    "./res/templates/menus.html"
 ], function (
     ExampleStyleGuideModelProvider,
     MCTExample,
@@ -20,13 +19,14 @@ define([
     glyphsTemplate,
     controlsTemplate,
     inputTemplate,
-    menusTemplate,
-    legacyRegistry
+    menusTemplate
 ) {
-    legacyRegistry.register("example/styleguide", {
-        "name": "Open MCT Style Guide",
-        "description": "Examples and documentation illustrating UI styles in use in Open MCT.",
-        "extensions":
+    return {
+        name:"example/styleguide",
+        definition: {
+            "name": "Open MCT Style Guide",
+            "description": "Examples and documentation illustrating UI styles in use in Open MCT.",
+            "extensions":
         {
             "types": [
                 { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
@@ -103,5 +103,6 @@ define([
                 }
             ]
         }
-    });
+        }
+    };
 });

example/styleguide/src/ExampleStyleGuideModelProvider.js

@@ -30,14 +30,14 @@ define(
             var pages = {};
 
             // Add pages
-            pages['intro'] = { name: "Introduction", type: "styleguide.intro", location: "styleguide:home" };
-            pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
-            pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
-            pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
-            pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
-            pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
-            pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
-            pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
+            pages.intro = { name: "Introduction", type: "styleguide.intro", location: "styleguide:home" };
+            pages.standards = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
+            pages.colors = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
+            pages.glyphs = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
+            pages.status = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
+            pages.controls = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
+            pages.input = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
+            pages.menus = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
 
             return {
                 getModels: function () {
@@ -48,4 +48,4 @@ define(
 
         return ExampleStyleGuideModelProvider
     }
-);
+);

index.html

@@ -27,6 +27,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <title></title>
         <script src="dist/openmct.js"></script>
+        <link rel="stylesheet" href="espresso.css">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
@@ -37,50 +38,50 @@
         const FIVE_MINUTES = 5 * 60 * 1000;
         const THIRTY_MINUTES = 30 * 60 * 1000;
 
-        [
-            'example/eventGenerator',
-            'example/styleguide'
-        ].forEach(
-            openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
-        );
+        // [
+        //     'example/eventGenerator',
+        //     'example/styleguide'
+        // ].forEach(
+        //     openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
+        // );
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
-        openmct.install(openmct.plugins.Generator());
-        openmct.install(openmct.plugins.ExampleImagery());
+        // openmct.install(openmct.plugins.Generator());
+        // openmct.install(openmct.plugins.ExampleImagery());
         openmct.install(openmct.plugins.UTCTimeSystem());
-        openmct.install(openmct.plugins.AutoflowView({
-            type: "telemetry.panel"
-        }));
+        // openmct.install(openmct.plugins.AutoflowView({
+        //     type: "telemetry.panel"
+        // }));
         openmct.install(openmct.plugins.DisplayLayout({
             showAsView: ['summary-widget', 'example.imagery']
         }));
-        openmct.install(openmct.plugins.Conductor({
-            menuOptions: [
-                {
-                    name: "Fixed",
-                    timeSystem: 'utc',
-                    bounds: {
-                        start: Date.now() - THIRTY_MINUTES,
-                        end: Date.now()
-                    }
-                },
-                {
-                    name: "Realtime",
-                    timeSystem: 'utc',
-                    clock: 'local',
-                    clockOffsets: {
-                        start: - THIRTY_MINUTES,
-                        end: FIVE_MINUTES
-                    }
-                }
-            ]
-        }));
-        openmct.install(openmct.plugins.SummaryWidget());
-        openmct.install(openmct.plugins.Notebook());
-        openmct.install(openmct.plugins.LADTable());
-        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
-        openmct.install(openmct.plugins.ObjectMigration());
-        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+        // openmct.install(openmct.plugins.Conductor({
+        //     menuOptions: [
+        //         {
+        //             name: "Fixed",
+        //             timeSystem: 'utc',
+        //             bounds: {
+        //                 start: Date.now() - THIRTY_MINUTES,
+        //                 end: Date.now()
+        //             }
+        //         },
+        //         {
+        //             name: "Realtime",
+        //             timeSystem: 'utc',
+        //             clock: 'local',
+        //             clockOffsets: {
+        //                 start: - THIRTY_MINUTES,
+        //                 end: FIVE_MINUTES
+        //             }
+        //         }
+        //     ]
+        // }));
+        // openmct.install(openmct.plugins.SummaryWidget());
+        // openmct.install(openmct.plugins.Notebook());
+        // openmct.install(openmct.plugins.LADTable());
+        // openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+        // openmct.install(openmct.plugins.ObjectMigration());
+        // openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
         openmct.start();
     </script>
 </html>

package.json

@@ -23,6 +23,7 @@
     "d3-time": "1.0.x",
     "d3-time-format": "2.1.x",
     "eslint": "5.2.0",
+    "eslint-plugin-vue": "^6.0.0",
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
@@ -74,8 +75,8 @@
   },
   "scripts": {
     "start": "node app.js",
-    "lint": "eslint platform src openmct.js",
-    "lint:fix": "eslint platform src openmct.js --fix",
+    "lint": "eslint platform example src/**/*.{js,vue} openmct.js",
+    "lint:fix": "eslint platform example src/**/*.{js,vue} openmct.js --fix",
     "build:prod": "NODE_ENV=production webpack",
     "build:dev": "webpack",
     "build:watch": "webpack --watch",

platform/commonUI/about/bundle.js

@@ -31,8 +31,7 @@ define([
     "./res/templates/license-apache.html",
     "./res/templates/license-mit.html",
     "./res/templates/licenses.html",
-    "./res/templates/licenses-export-md.html",
-    'legacyRegistry'
+    "./res/templates/licenses-export-md.html"
 ], function (
     aboutDialogTemplate,
     LogoController,
@@ -44,137 +43,139 @@ define([
     licenseApacheTemplate,
     licenseMitTemplate,
     licensesTemplate,
-    licensesExportMdTemplate,
-    legacyRegistry
+    licensesExportMdTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/about", {
-        "name": "About Open MCT",
-        "extensions": {
-            "templates": [
-                {
-                    "key": "app-logo",
-                    "priority": "optional",
-                    "template": appLogoTemplate
-                },
-                {
-                    "key": "about-logo",
-                    "priority": "preferred",
-                    "template": aboutLogoTemplate
-                },
-                {
-                    "key": "about-dialog",
-                    "template": aboutDialogTemplate
-                },
-                {
-                    "key": "overlay-about",
-                    "template": overlayAboutTemplate
-                },
-                {
-                    "key": "license-apache",
-                    "template": licenseApacheTemplate
-                },
-                {
-                    "key": "license-mit",
-                    "template": licenseMitTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "LogoController",
-                    "depends": [
-                        "overlayService"
-                    ],
-                    "implementation": LogoController
-                },
-                {
-                    "key": "AboutController",
-                    "depends": [
-                        "versions[]",
-                        "$window"
-                    ],
-                    "implementation": AboutController
-                },
-                {
-                    "key": "LicenseController",
-                    "depends": [
-                        "licenses[]"
-                    ],
-                    "implementation": LicenseController
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "Json.NET",
-                    "version": "6.0.8",
-                    "author": "Newtonsoft",
-                    "description": "JSON serialization/deserialization",
-                    "website": "http://www.newtonsoft.com/json",
-                    "copyright": "Copyright (c) 2007 James Newton-King",
-                    "license": "license-mit",
-                    "link": "https://github.com/JamesNK/Newtonsoft.Json/blob/master/LICENSE.md"
-                },
-                {
-                    "name": "Nancy",
-                    "version": "0.23.2",
-                    "author": "Andreas Håkansson, Steven Robbins and contributors",
-                    "description": "Embedded web server",
-                    "website": "http://nancyfx.org/",
-                    "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
-                    "license": "license-mit",
-                    "link": "http://www.opensource.org/licenses/mit-license.php"
-                },
-                {
-                    "name": "Nancy.Hosting.Self",
-                    "version": "0.23.2",
-                    "author": "Andreas Håkansson, Steven Robbins and contributors",
-                    "description": "Embedded web server",
-                    "website": "http://nancyfx.org/",
-                    "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
-                    "license": "license-mit",
-                    "link": "http://www.opensource.org/licenses/mit-license.php"
-                },
-                {
-                    "name": "SuperSocket",
-                    "version": "0.9.0.2",
-                    "author": " Kerry Jiang",
-                    "description": "Supports SuperWebSocket",
-                    "website": "https://supersocket.codeplex.com/",
-                    "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
-                    "license": "license-apache",
-                    "link": "https://supersocket.codeplex.com/license"
-                },
-                {
-                    "name": "SuperWebSocket",
-                    "version": "0.9.0.2",
-                    "author": " Kerry Jiang",
-                    "description": "WebSocket implementation for client-server communication",
-                    "website": "https://superwebsocket.codeplex.com/",
-                    "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
-                    "license": "license-apache",
-                    "link": "https://superwebsocket.codeplex.com/license"
-                },
-                {
-                    "name": "log4net",
-                    "version": "2.0.3",
-                    "author": "Apache Software Foundation",
-                    "description": "Logging",
-                    "website": "http://logging.apache.org/log4net/",
-                    "copyright": "Copyright © 2004-2015 Apache Software Foundation.",
-                    "license": "license-apache",
-                    "link": "http://logging.apache.org/log4net/license.html"
-                }
-            ],
-            "routes": [
-                {
-                    "when": "/licenses",
-                    "template": licensesTemplate
-                },
-                {
-                    "when": "/licenses-md",
-                    "template": licensesExportMdTemplate
-                }
-            ]
+    return {
+        name:"platform/commonUI/about",
+        definition: {
+            "name": "About Open MCT",
+            "extensions": {
+                "templates": [
+                    {
+                        "key": "app-logo",
+                        "priority": "optional",
+                        "template": appLogoTemplate
+                    },
+                    {
+                        "key": "about-logo",
+                        "priority": "preferred",
+                        "template": aboutLogoTemplate
+                    },
+                    {
+                        "key": "about-dialog",
+                        "template": aboutDialogTemplate
+                    },
+                    {
+                        "key": "overlay-about",
+                        "template": overlayAboutTemplate
+                    },
+                    {
+                        "key": "license-apache",
+                        "template": licenseApacheTemplate
+                    },
+                    {
+                        "key": "license-mit",
+                        "template": licenseMitTemplate
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "LogoController",
+                        "depends": [
+                            "overlayService"
+                        ],
+                        "implementation": LogoController
+                    },
+                    {
+                        "key": "AboutController",
+                        "depends": [
+                            "versions[]",
+                            "$window"
+                        ],
+                        "implementation": AboutController
+                    },
+                    {
+                        "key": "LicenseController",
+                        "depends": [
+                            "licenses[]"
+                        ],
+                        "implementation": LicenseController
+                    }
+                ],
+                "licenses": [
+                    {
+                        "name": "Json.NET",
+                        "version": "6.0.8",
+                        "author": "Newtonsoft",
+                        "description": "JSON serialization/deserialization",
+                        "website": "http://www.newtonsoft.com/json",
+                        "copyright": "Copyright (c) 2007 James Newton-King",
+                        "license": "license-mit",
+                        "link": "https://github.com/JamesNK/Newtonsoft.Json/blob/master/LICENSE.md"
+                    },
+                    {
+                        "name": "Nancy",
+                        "version": "0.23.2",
+                        "author": "Andreas Håkansson, Steven Robbins and contributors",
+                        "description": "Embedded web server",
+                        "website": "http://nancyfx.org/",
+                        "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
+                        "license": "license-mit",
+                        "link": "http://www.opensource.org/licenses/mit-license.php"
+                    },
+                    {
+                        "name": "Nancy.Hosting.Self",
+                        "version": "0.23.2",
+                        "author": "Andreas Håkansson, Steven Robbins and contributors",
+                        "description": "Embedded web server",
+                        "website": "http://nancyfx.org/",
+                        "copyright": "Copyright © 2010 Andreas Håkansson, Steven Robbins and contributors",
+                        "license": "license-mit",
+                        "link": "http://www.opensource.org/licenses/mit-license.php"
+                    },
+                    {
+                        "name": "SuperSocket",
+                        "version": "0.9.0.2",
+                        "author": " Kerry Jiang",
+                        "description": "Supports SuperWebSocket",
+                        "website": "https://supersocket.codeplex.com/",
+                        "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
+                        "license": "license-apache",
+                        "link": "https://supersocket.codeplex.com/license"
+                    },
+                    {
+                        "name": "SuperWebSocket",
+                        "version": "0.9.0.2",
+                        "author": " Kerry Jiang",
+                        "description": "WebSocket implementation for client-server communication",
+                        "website": "https://superwebsocket.codeplex.com/",
+                        "copyright": "Copyright 2010-2014 Kerry Jiang (kerry-jiang@hotmail.com)",
+                        "license": "license-apache",
+                        "link": "https://superwebsocket.codeplex.com/license"
+                    },
+                    {
+                        "name": "log4net",
+                        "version": "2.0.3",
+                        "author": "Apache Software Foundation",
+                        "description": "Logging",
+                        "website": "http://logging.apache.org/log4net/",
+                        "copyright": "Copyright © 2004-2015 Apache Software Foundation.",
+                        "license": "license-apache",
+                        "link": "http://logging.apache.org/log4net/license.html"
+                    }
+                ],
+                "routes": [
+                    {
+                        "when": "/licenses",
+                        "template": licensesTemplate
+                    },
+                    {
+                        "when": "/licenses-md",
+                        "template": licensesExportMdTemplate
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/browse/bundle.js

@@ -32,8 +32,7 @@ define([
     "./res/templates/menu-arrow.html",
     "./res/templates/back-arrow.html",
     "./res/templates/browse/object-properties.html",
-    "./res/templates/browse/inspector-region.html",
-    'legacyRegistry'
+    "./res/templates/browse/inspector-region.html"
 ], function (
     NavigationService,
     NavigateAction,
@@ -46,131 +45,133 @@ define([
     menuArrowTemplate,
     backArrowTemplate,
     objectPropertiesTemplate,
-    inspectorRegionTemplate,
-    legacyRegistry
+    inspectorRegionTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/browse", {
-        "extensions": {
-            "routes": [
-            ],
-            "constants": [
-                {
-                    "key": "DEFAULT_PATH",
-                    "value": "mine",
-                    "priority": "fallback"
-                }
-            ],
-            "representations": [
-                {
-                    "key": "browse-object",
-                    "template": browseObjectTemplate,
-                    "gestures": [
-                        "drop"
-                    ],
-                    "uses": [
-                        "view"
-                    ]
-                },
-                {
-                    "key": "object-header",
-                    "template": objectHeaderTemplate,
-                    "uses": [
-                        "type"
-                    ]
-                },
-                {
-                    "key": "object-header-frame",
-                    "template": objectHeaderFrameTemplate,
-                    "uses": [
-                        "type"
-                    ]
-                },
-                {
-                    "key": "menu-arrow",
-                    "template": menuArrowTemplate,
-                    "uses": [
-                        "action"
-                    ],
-                    "gestures": [
-                        "menu"
-                    ]
-                },
-                {
-                    "key": "back-arrow",
-                    "uses": [
-                        "context"
-                    ],
-                    "template": backArrowTemplate
-                },
-                {
-                    "key": "object-properties",
-                    "template": objectPropertiesTemplate
-                },
-                {
-                    "key": "inspector-region",
-                    "template": inspectorRegionTemplate
-                }
-            ],
-            "services": [
-                {
-                    "key": "navigationService",
-                    "implementation": NavigationService,
-                    "depends": [
-                        "$window"
-                    ]
-                }
-            ],
-            "actions": [
-                {
-                    "key": "navigate",
-                    "implementation": NavigateAction,
-                    "depends": [
-                        "navigationService"
-                    ]
-                },
-                {
-                    "key": "window",
-                    "name": "Open In New Tab",
-                    "implementation": NewTabAction,
-                    "description": "Open in a new browser tab",
-                    "category": [
-                        "view-control",
-                        "contextual"
-                    ],
-                    "depends": [
-                        "urlService",
-                        "$window"
-                    ],
-                    "group": "windowing",
-                    "cssClass": "icon-new-window",
-                    "priority": "preferred"
-                }
-            ],
-            "runs": [
-                {
-                    "implementation": OrphanNavigationHandler,
-                    "depends": [
-                        "throttle",
-                        "topic",
-                        "navigationService"
-                    ]
-                }
-            ],
-            "templates": [
-                {
-                    key: "browseRoot",
-                    template: browseTemplate
-                },
-                {
-                    key: "browseObject",
-                    template: browseObjectTemplate
-                },
-                {
-                    key: "inspectorRegion",
-                    template: inspectorRegionTemplate
-                }
-            ]
+    return {
+        name:"platform/commonUI/browse",
+        definition: {
+            "extensions": {
+                "routes": [
+                ],
+                "constants": [
+                    {
+                        "key": "DEFAULT_PATH",
+                        "value": "mine",
+                        "priority": "fallback"
+                    }
+                ],
+                "representations": [
+                    {
+                        "key": "browse-object",
+                        "template": browseObjectTemplate,
+                        "gestures": [
+                            "drop"
+                        ],
+                        "uses": [
+                            "view"
+                        ]
+                    },
+                    {
+                        "key": "object-header",
+                        "template": objectHeaderTemplate,
+                        "uses": [
+                            "type"
+                        ]
+                    },
+                    {
+                        "key": "object-header-frame",
+                        "template": objectHeaderFrameTemplate,
+                        "uses": [
+                            "type"
+                        ]
+                    },
+                    {
+                        "key": "menu-arrow",
+                        "template": menuArrowTemplate,
+                        "uses": [
+                            "action"
+                        ],
+                        "gestures": [
+                            "menu"
+                        ]
+                    },
+                    {
+                        "key": "back-arrow",
+                        "uses": [
+                            "context"
+                        ],
+                        "template": backArrowTemplate
+                    },
+                    {
+                        "key": "object-properties",
+                        "template": objectPropertiesTemplate
+                    },
+                    {
+                        "key": "inspector-region",
+                        "template": inspectorRegionTemplate
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "navigationService",
+                        "implementation": NavigationService,
+                        "depends": [
+                            "$window"
+                        ]
+                    }
+                ],
+                "actions": [
+                    {
+                        "key": "navigate",
+                        "implementation": NavigateAction,
+                        "depends": [
+                            "navigationService"
+                        ]
+                    },
+                    {
+                        "key": "window",
+                        "name": "Open In New Tab",
+                        "implementation": NewTabAction,
+                        "description": "Open in a new browser tab",
+                        "category": [
+                            "view-control",
+                            "contextual"
+                        ],
+                        "depends": [
+                            "urlService",
+                            "$window"
+                        ],
+                        "group": "windowing",
+                        "cssClass": "icon-new-window",
+                        "priority": "preferred"
+                    }
+                ],
+                "runs": [
+                    {
+                        "implementation": OrphanNavigationHandler,
+                        "depends": [
+                            "throttle",
+                            "topic",
+                            "navigationService"
+                        ]
+                    }
+                ],
+                "templates": [
+                    {
+                        key: "browseRoot",
+                        template: browseTemplate
+                    },
+                    {
+                        key: "browseObject",
+                        template: browseObjectTemplate
+                    },
+                    {
+                        key: "inspectorRegion",
+                        template: inspectorRegionTemplate
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/dialog/bundle.js

@@ -30,8 +30,7 @@ define([
     "./res/templates/message.html",
     "./res/templates/notification-message.html",
     "./res/templates/overlay-message-list.html",
-    "./res/templates/overlay.html",
-    'legacyRegistry'
+    "./res/templates/overlay.html"
 ], function (
     DialogService,
     OverlayService,
@@ -42,70 +41,72 @@ define([
     messageTemplate,
     notificationMessageTemplate,
     overlayMessageListTemplate,
-    overlayTemplate,
-    legacyRegistry
+    overlayTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/dialog", {
-        "extensions": {
-            "services": [
-                {
-                    "key": "dialogService",
-                    "implementation": DialogService,
-                    "depends": [
-                        "overlayService",
-                        "$q",
-                        "$log",
-                        "$document"
-                    ]
-                },
-                {
-                    "key": "overlayService",
-                    "implementation": OverlayService,
-                    "depends": [
-                        "$document",
-                        "$compile",
-                        "$rootScope",
-                        "$timeout"
-                    ]
-                }
-            ],
-            "templates": [
-                {
-                    "key": "overlay-dialog",
-                    "template": overlayDialogTemplate
-                },
-                {
-                    "key": "overlay-options",
-                    "template": overlayOptionsTemplate
-                },
-                {
-                    "key": "form-dialog",
-                    "template": dialogTemplate
-                },
-                {
-                    "key": "overlay-blocking-message",
-                    "template": overlayBlockingMessageTemplate
-                },
-                {
-                    "key": "message",
-                    "template": messageTemplate
-                },
-                {
-                    "key": "notification-message",
-                    "template": notificationMessageTemplate
-                },
-                {
-                    "key": "overlay-message-list",
-                    "template": overlayMessageListTemplate
-                }
-            ],
-            "containers": [
-                {
-                    "key": "overlay",
-                    "template": overlayTemplate
-                }
-            ]
+    return {
+        name:"platform/commonUI/dialog",
+        definition: {
+            "extensions": {
+                "services": [
+                    {
+                        "key": "dialogService",
+                        "implementation": DialogService,
+                        "depends": [
+                            "overlayService",
+                            "$q",
+                            "$log",
+                            "$document"
+                        ]
+                    },
+                    {
+                        "key": "overlayService",
+                        "implementation": OverlayService,
+                        "depends": [
+                            "$document",
+                            "$compile",
+                            "$rootScope",
+                            "$timeout"
+                        ]
+                    }
+                ],
+                "templates": [
+                    {
+                        "key": "overlay-dialog",
+                        "template": overlayDialogTemplate
+                    },
+                    {
+                        "key": "overlay-options",
+                        "template": overlayOptionsTemplate
+                    },
+                    {
+                        "key": "form-dialog",
+                        "template": dialogTemplate
+                    },
+                    {
+                        "key": "overlay-blocking-message",
+                        "template": overlayBlockingMessageTemplate
+                    },
+                    {
+                        "key": "message",
+                        "template": messageTemplate
+                    },
+                    {
+                        "key": "notification-message",
+                        "template": notificationMessageTemplate
+                    },
+                    {
+                        "key": "overlay-message-list",
+                        "template": overlayMessageListTemplate
+                    }
+                ],
+                "containers": [
+                    {
+                        "key": "overlay",
+                        "template": overlayTemplate
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/edit/bundle.js

@@ -48,8 +48,7 @@ define([
     "./res/templates/library.html",
     "./res/templates/edit-object.html",
     "./res/templates/edit-action-buttons.html",
-    "./res/templates/topbar-edit.html",
-    'legacyRegistry'
+    "./res/templates/topbar-edit.html"
 ], function (
     EditActionController,
     EditPanesController,
@@ -78,276 +77,277 @@ define([
     libraryTemplate,
     editObjectTemplate,
     editActionButtonsTemplate,
-    topbarEditTemplate,
-    legacyRegistry
+    topbarEditTemplate
 ) {
-
-    legacyRegistry.register("platform/commonUI/edit", {
-        "extensions": {
-            "controllers": [
-                {
-                    "key": "EditActionController",
-                    "implementation": EditActionController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "EditPanesController",
-                    "implementation": EditPanesController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "EditObjectController",
-                    "implementation": EditObjectController,
-                    "depends": [
-                        "$scope",
-                        "$location",
-                        "navigationService"
-                    ]
-                },
-                {
-                    "key": "CreateMenuController",
-                    "implementation": CreateMenuController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "LocatorController",
-                    "implementation": LocatorController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "objectService"
-                    ]
-                }
-            ],
-            "actions": [
-                {
-                    "key": "compose",
-                    "implementation": EditAndComposeAction
-                },
-                {
-                    "key": "edit",
-                    "implementation": EditAction,
-                    "depends": [
-                        "$location",
-                        "navigationService",
-                        "$log"
-                    ],
-                    "description": "Edit",
-                    "category": "view-control",
-                    "cssClass": "major icon-pencil"
-                },
-                {
-                    "key": "properties",
-                    "category": [
-                        "contextual",
-                        "view-control"
-                    ],
-                    "implementation": PropertiesAction,
-                    "cssClass": "major icon-pencil",
-                    "name": "Edit Properties...",
-                    "description": "Edit properties of this object.",
-                    "depends": [
-                        "dialogService"
-                    ]
-                },
-                {
-                    "key": "save-and-stop-editing",
-                    "category": "save",
-                    "implementation": SaveAndStopEditingAction,
-                    "name": "Save and Finish Editing",
-                    "cssClass": "icon-save labeled",
-                    "description": "Save changes made to these objects.",
-                    "depends": [
-                        "dialogService",
-                        "notificationService"
-                    ]
-                },
-                {
-                    "key": "save",
-                    "category": "save",
-                    "implementation": SaveAction,
-                    "name": "Save and Continue Editing",
-                    "cssClass": "icon-save labeled",
-                    "description": "Save changes made to these objects.",
-                    "depends": [
-                        "dialogService",
-                        "notificationService"
-                    ]
-                },
-                {
-                    "key": "save-as",
-                    "category": "save",
-                    "implementation": SaveAsAction,
-                    "name": "Save As...",
-                    "cssClass": "icon-save labeled",
-                    "description": "Save changes made to these objects.",
-                    "depends": [
-                        "$injector",
-                        "dialogService",
-                        "copyService",
-                        "notificationService",
-                        "openmct"
-                    ],
-                    "priority": "mandatory"
-                },
-                {
-                    "key": "cancel",
-                    "category": "conclude-editing",
-                    "implementation": CancelAction,
-                    // Because we use the name as label for edit buttons and mct-control buttons need
-                    // the label to be set to undefined in order to not apply the labeled CSS rule.
-                    "name": undefined,
-                    "cssClass": "icon-x no-label",
-                    "description": "Discard changes made to these objects.",
-                    "depends": []
-                }
-            ],
-            "policies": [
-                {
-                    "category": "action",
-                    "implementation": EditPersistableObjectsPolicy,
-                    "depends": ["openmct"]
-                },
-                {
-                    "implementation": CreationPolicy,
-                    "category": "creation"
-                }
-            ],
-            "templates": [
-                {
-                    "key": "edit-library",
-                    "template": libraryTemplate
-                }
-            ],
-            "representations": [
-                {
-                    "key": "edit-object",
-                    "template": editObjectTemplate,
-                    "uses": [
-                        "view"
-                    ],
-                    "gestures": [
-                        "drop"
-                    ]
-                },
-                {
-                    "key": "edit-action-buttons",
-                    "template": editActionButtonsTemplate,
-                    "uses": [
-                        "action"
-                    ]
-                },
-                {
-                    "key": "topbar-edit",
-                    "template": topbarEditTemplate
-                },
-                {
-                    "key": "create-button",
-                    "template": createButtonTemplate
-                },
-                {
-                    "key": "create-menu",
-                    "template": createMenuTemplate,
-                    "uses": [
-                        "action"
-                    ]
-                }
-            ],
-            "components": [
-                {
-                    "type": "decorator",
-                    "provides": "capabilityService",
-                    "implementation": TransactionCapabilityDecorator,
-                    "depends": [
-                        "$q",
-                        "transactionManager"
-                    ],
-                    "priority": "fallback"
-                },
-                {
-                    "type": "provider",
-                    "provides": "transactionService",
-                    "implementation": TransactionService,
-                    "depends": [
-                        "$q",
-                        "$log",
-                        "cacheService"
-                    ]
-                },
-                {
-                    "key": "CreateActionProvider",
-                    "provides": "actionService",
-                    "type": "provider",
-                    "implementation": CreateActionProvider,
-                    "depends": [
-                        "typeService",
-                        "policyService"
-                    ]
-                },
-                {
-                    "key": "CreationService",
-                    "provides": "creationService",
-                    "type": "provider",
-                    "implementation": CreationService,
-                    "depends": [
-                        "$q",
-                        "$log"
-                    ]
-                }
-
-            ],
-            "representers": [
-                {
-                    "implementation": EditRepresenter,
-                    "depends": [
-                        "$log"
-                    ]
-                }
-            ],
-            "capabilities": [
-                {
-                    "key": "editor",
-                    "name": "Editor Capability",
-                    "description": "Provides transactional editing capabilities",
-                    "implementation": EditorCapability,
-                    "depends": [
-                        "transactionService",
-                        "openmct"
-                    ]
-                }
-            ],
-            "controls": [
-                {
-                    "key": "locator",
-                    "template": locatorTemplate
-                }
-            ],
-            "services": [
-                {
-                    "key": "transactionManager",
-                    "implementation": TransactionManager,
-                    "depends": [
-                        "transactionService"
-                    ]
-                }
-            ],
-            "runs": [
-                {
-                    depends: [
-                        "toolbars[]",
-                        "openmct"
-                    ],
-                    implementation: function (toolbars, openmct) {
-                        toolbars.forEach(openmct.toolbars.addProvider, openmct.toolbars);
+    return {
+        name: "platform/commonUI/edit",
+        definition: {
+            "extensions": {
+                "controllers": [
+                    {
+                        "key": "EditActionController",
+                        "implementation": EditActionController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "EditPanesController",
+                        "implementation": EditPanesController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "EditObjectController",
+                        "implementation": EditObjectController,
+                        "depends": [
+                            "$scope",
+                            "$location",
+                            "navigationService"
+                        ]
+                    },
+                    {
+                        "key": "CreateMenuController",
+                        "implementation": CreateMenuController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "LocatorController",
+                        "implementation": LocatorController,
+                        "depends": [
+                            "$scope",
+                            "$timeout",
+                            "objectService"
+                        ]
                     }
-                }
-            ]
+                ],
+                "actions": [
+                    {
+                        "key": "compose",
+                        "implementation": EditAndComposeAction
+                    },
+                    {
+                        "key": "edit",
+                        "implementation": EditAction,
+                        "depends": [
+                            "$location",
+                            "navigationService",
+                            "$log"
+                        ],
+                        "description": "Edit",
+                        "category": "view-control",
+                        "cssClass": "major icon-pencil"
+                    },
+                    {
+                        "key": "properties",
+                        "category": [
+                            "contextual",
+                            "view-control"
+                        ],
+                        "implementation": PropertiesAction,
+                        "cssClass": "major icon-pencil",
+                        "name": "Edit Properties...",
+                        "description": "Edit properties of this object.",
+                        "depends": [
+                            "dialogService"
+                        ]
+                    },
+                    {
+                        "key": "save-and-stop-editing",
+                        "category": "save",
+                        "implementation": SaveAndStopEditingAction,
+                        "name": "Save and Finish Editing",
+                        "cssClass": "icon-save labeled",
+                        "description": "Save changes made to these objects.",
+                        "depends": [
+                            "dialogService",
+                            "notificationService"
+                        ]
+                    },
+                    {
+                        "key": "save",
+                        "category": "save",
+                        "implementation": SaveAction,
+                        "name": "Save and Continue Editing",
+                        "cssClass": "icon-save labeled",
+                        "description": "Save changes made to these objects.",
+                        "depends": [
+                            "dialogService",
+                            "notificationService"
+                        ]
+                    },
+                    {
+                        "key": "save-as",
+                        "category": "save",
+                        "implementation": SaveAsAction,
+                        "name": "Save As...",
+                        "cssClass": "icon-save labeled",
+                        "description": "Save changes made to these objects.",
+                        "depends": [
+                            "$injector",
+                            "dialogService",
+                            "copyService",
+                            "notificationService",
+                            "openmct"
+                        ],
+                        "priority": "mandatory"
+                    },
+                    {
+                        "key": "cancel",
+                        "category": "conclude-editing",
+                        "implementation": CancelAction,
+                        // Because we use the name as label for edit buttons and mct-control buttons need
+                        // the label to be set to undefined in order to not apply the labeled CSS rule.
+                        "name": undefined,
+                        "cssClass": "icon-x no-label",
+                        "description": "Discard changes made to these objects.",
+                        "depends": []
+                    }
+                ],
+                "policies": [
+                    {
+                        "category": "action",
+                        "implementation": EditPersistableObjectsPolicy,
+                        "depends": ["openmct"]
+                    },
+                    {
+                        "implementation": CreationPolicy,
+                        "category": "creation"
+                    }
+                ],
+                "templates": [
+                    {
+                        "key": "edit-library",
+                        "template": libraryTemplate
+                    }
+                ],
+                "representations": [
+                    {
+                        "key": "edit-object",
+                        "template": editObjectTemplate,
+                        "uses": [
+                            "view"
+                        ],
+                        "gestures": [
+                            "drop"
+                        ]
+                    },
+                    {
+                        "key": "edit-action-buttons",
+                        "template": editActionButtonsTemplate,
+                        "uses": [
+                            "action"
+                        ]
+                    },
+                    {
+                        "key": "topbar-edit",
+                        "template": topbarEditTemplate
+                    },
+                    {
+                        "key": "create-button",
+                        "template": createButtonTemplate
+                    },
+                    {
+                        "key": "create-menu",
+                        "template": createMenuTemplate,
+                        "uses": [
+                            "action"
+                        ]
+                    }
+                ],
+                "components": [
+                    {
+                        "type": "decorator",
+                        "provides": "capabilityService",
+                        "implementation": TransactionCapabilityDecorator,
+                        "depends": [
+                            "$q",
+                            "transactionManager"
+                        ],
+                        "priority": "fallback"
+                    },
+                    {
+                        "type": "provider",
+                        "provides": "transactionService",
+                        "implementation": TransactionService,
+                        "depends": [
+                            "$q",
+                            "$log",
+                            "cacheService"
+                        ]
+                    },
+                    {
+                        "key": "CreateActionProvider",
+                        "provides": "actionService",
+                        "type": "provider",
+                        "implementation": CreateActionProvider,
+                        "depends": [
+                            "typeService",
+                            "policyService"
+                        ]
+                    },
+                    {
+                        "key": "CreationService",
+                        "provides": "creationService",
+                        "type": "provider",
+                        "implementation": CreationService,
+                        "depends": [
+                            "$q",
+                            "$log"
+                        ]
+                    }
+
+                ],
+                "representers": [
+                    {
+                        "implementation": EditRepresenter,
+                        "depends": [
+                            "$log"
+                        ]
+                    }
+                ],
+                "capabilities": [
+                    {
+                        "key": "editor",
+                        "name": "Editor Capability",
+                        "description": "Provides transactional editing capabilities",
+                        "implementation": EditorCapability,
+                        "depends": [
+                            "transactionService",
+                            "openmct"
+                        ]
+                    }
+                ],
+                "controls": [
+                    {
+                        "key": "locator",
+                        "template": locatorTemplate
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "transactionManager",
+                        "implementation": TransactionManager,
+                        "depends": [
+                            "transactionService"
+                        ]
+                    }
+                ],
+                "runs": [
+                    {
+                        depends: [
+                            "toolbars[]",
+                            "openmct"
+                        ],
+                        implementation: function (toolbars, openmct) {
+                            toolbars.forEach(openmct.toolbars.addProvider, openmct.toolbars);
+                        }
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/formats/bundle.js

@@ -23,56 +23,57 @@
 define([
     "./src/FormatProvider",
     "./src/UTCTimeFormat",
-    "./src/DurationFormat",
-    'legacyRegistry'
+    "./src/DurationFormat"
 ], function (
     FormatProvider,
     UTCTimeFormat,
-    DurationFormat,
-    legacyRegistry
+    DurationFormat
 ) {
 
-    legacyRegistry.register("platform/commonUI/formats", {
-        "name": "Format Registry",
-        "description": "Provides a registry for formats, which allow parsing and formatting of values.",
-        "extensions": {
-            "components": [
-                {
-                    "provides": "formatService",
-                    "type": "provider",
-                    "implementation": FormatProvider,
-                    "depends": [
-                        "formats[]"
-                    ]
-                }
-            ],
-            "formats": [
-                {
-                    "key": "utc",
-                    "implementation": UTCTimeFormat
-                },
-                {
-                    "key": "duration",
-                    "implementation": DurationFormat
-                }
-            ],
-            "constants": [
-                {
-                    "key": "DEFAULT_TIME_FORMAT",
-                    "value": "utc"
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "d3",
-                    "version": "3.0.0",
-                    "description": "Incorporates modified code from d3 Time Scales",
-                    "author": "Mike Bostock",
-                    "copyright": "Copyright 2010-2016 Mike Bostock. " +
+    return {
+        name:"platform/commonUI/formats",
+        definition: {
+            "name": "Format Registry",
+            "description": "Provides a registry for formats, which allow parsing and formatting of values.",
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "formatService",
+                        "type": "provider",
+                        "implementation": FormatProvider,
+                        "depends": [
+                            "formats[]"
+                        ]
+                    }
+                ],
+                "formats": [
+                    {
+                        "key": "utc",
+                        "implementation": UTCTimeFormat
+                    },
+                    {
+                        "key": "duration",
+                        "implementation": DurationFormat
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "DEFAULT_TIME_FORMAT",
+                        "value": "utc"
+                    }
+                ],
+                "licenses": [
+                    {
+                        "name": "d3",
+                        "version": "3.0.0",
+                        "description": "Incorporates modified code from d3 Time Scales",
+                        "author": "Mike Bostock",
+                        "copyright": "Copyright 2010-2016 Mike Bostock. " +
                     "All rights reserved.",
-                    "link": "https://github.com/d3/d3/blob/master/LICENSE"
-                }
-            ]
+                        "link": "https://github.com/d3/d3/blob/master/LICENSE"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/general/bundle.js

@@ -66,8 +66,7 @@ define([
     "./res/templates/object-inspector.html",
     "./res/templates/controls/selector.html",
     "./res/templates/controls/datetime-picker.html",
-    "./res/templates/controls/datetime-field.html",
-    'legacyRegistry'
+    "./res/templates/controls/datetime-field.html"
 ], function (
     UrlService,
     PopupService,
@@ -114,415 +113,417 @@ define([
     objectInspectorTemplate,
     selectorTemplate,
     datetimePickerTemplate,
-    datetimeFieldTemplate,
-    legacyRegistry
+    datetimeFieldTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/general", {
-        "name": "General UI elements",
-        "description": "General UI elements, meant to be reused across modes",
-        "resources": "res",
-        "extensions": {
-            "services": [
-                {
-                    "key": "urlService",
-                    "implementation": UrlService,
-                    "depends": [
-                        "$location"
-                    ]
-                },
-                {
-                    "key": "popupService",
-                    "implementation": PopupService,
-                    "depends": [
-                        "$document",
-                        "$window"
-                    ]
-                }
-            ],
-            "runs": [
-                {
-                    "implementation": StyleSheetLoader,
-                    "depends": [
-                        "stylesheets[]",
-                        "$document",
-                        "THEME",
-                        "ASSETS_PATH"
-                    ]
-                },
-                {
-                    "implementation": SplashScreenManager,
-                    "depends": [
-                        "$document"
-                    ]
-                }
-            ],
-            "filters": [
-                {
-                    "implementation": ReverseFilter,
-                    "key": "reverse"
-                }
-            ],
-            "templates": [
-                {
-                    "key": "bottombar",
-                    "template": bottombarTemplate
-                },
-                {
-                    "key": "action-button",
-                    "template": actionButtonTemplate
-                },
-                {
-                    "key": "input-filter",
-                    "template": inputFilterTemplate
-                },
-                {
-                    "key": "indicator",
-                    "template": indicatorTemplate
-                },
-                {
-                    "key": "message-banner",
-                    "template": messageBannerTemplate
-                },
-                {
-                    "key": "progress-bar",
-                    "template": progressBarTemplate
-                },
-                {
-                    "key": "time-controller",
-                    "template": timeControllerTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "TimeRangeController",
-                    "implementation": TimeRangeController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "formatService",
-                        "DEFAULT_TIME_FORMAT",
-                        "now"
-                    ]
-                },
-                {
-                    "key": "DateTimePickerController",
-                    "implementation": DateTimePickerController,
-                    "depends": [
-                        "$scope",
-                        "now"
-                    ]
-                },
-                {
-                    "key": "DateTimeFieldController",
-                    "implementation": DateTimeFieldController,
-                    "depends": [
-                        "$scope",
-                        "formatService",
-                        "DEFAULT_TIME_FORMAT"
-                    ]
-                },
-                {
-                    "key": "TreeNodeController",
-                    "implementation": TreeNodeController,
-                    "depends": [
-                        "$scope",
-                        "$timeout",
-                        "navigationService"
-                    ]
-                },
-                {
-                    "key": "ActionGroupController",
-                    "implementation": ActionGroupController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "ToggleController",
-                    "implementation": ToggleController
-                },
-                {
-                    "key": "ClickAwayController",
-                    "implementation": ClickAwayController,
-                    "depends": [
-                        "$document",
-                        "$timeout"
-                    ]
-                },
-                {
-                    "key": "ViewSwitcherController",
-                    "implementation": ViewSwitcherController,
-                    "depends": [
-                        "$scope",
-                        "$timeout"
-                    ]
-                },
-                {
-                    "key": "GetterSetterController",
-                    "implementation": GetterSetterController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "SelectorController",
-                    "implementation": SelectorController,
-                    "depends": [
-                        "objectService",
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "ObjectInspectorController",
-                    "implementation": ObjectInspectorController,
-                    "depends": [
-                        "$scope",
-                        "objectService"
-                    ]
-                },
-                {
-                    "key": "BannerController",
-                    "implementation": BannerController,
-                    "depends": [
-                        "$scope",
-                        "notificationService",
-                        "dialogService"
-                    ]
-                }
-            ],
-            "directives": [
-                {
-                    "key": "mctContainer",
-                    "implementation": MCTContainer,
-                    "depends": [
-                        "containers[]"
-                    ]
-                },
-                {
-                    "key": "mctDrag",
-                    "implementation": MCTDrag,
-                    "depends": [
-                        "$document",
-                        "agentService"
-                    ]
-                },
-                {
-                    "key": "mctSelectable",
-                    "implementation": MCTSelectable,
-                    "depends": [
-                        "openmct"
-                    ]
-                },
-                {
-                    "key": "mctClickElsewhere",
-                    "implementation": MCTClickElsewhere,
-                    "depends": [
-                        "$document"
-                    ]
-                },
-                {
-                    "key": "mctResize",
-                    "implementation": MCTResize,
-                    "depends": [
-                        "$timeout"
-                    ]
-                },
-                {
-                    "key": "mctPopup",
-                    "implementation": MCTPopup,
-                    "depends": [
-                        "$compile",
-                        "popupService"
-                    ]
-                },
-                {
-                    "key": "mctScrollX",
-                    "implementation": MCTScroll,
-                    "depends": [
-                        "$parse",
-                        "MCT_SCROLL_X_PROPERTY",
-                        "MCT_SCROLL_X_ATTRIBUTE"
-                    ]
-                },
-                {
-                    "key": "mctScrollY",
-                    "implementation": MCTScroll,
-                    "depends": [
-                        "$parse",
-                        "MCT_SCROLL_Y_PROPERTY",
-                        "MCT_SCROLL_Y_ATTRIBUTE"
-                    ]
-                },
-                {
-                    "key": "mctSplitPane",
-                    "implementation": MCTSplitPane,
-                    "depends": [
-                        "$parse",
-                        "$log",
-                        "$interval",
-                        "$window"
-                    ]
-                },
-                {
-                    "key": "mctSplitter",
-                    "implementation": MCTSplitter
-                },
-                {
-                    "key": "mctTree",
-                    "implementation": MCTTree,
-                    "depends": ['gestureService', 'openmct']
-                },
-                {
-                    "key": "mctIndicators",
-                    "implementation": MCTIndicators,
-                    "depends": ['openmct']
-                }
-            ],
-            "constants": [
-                {
-                    "key": "MCT_SCROLL_X_PROPERTY",
-                    "value": "scrollLeft"
-                },
-                {
-                    "key": "MCT_SCROLL_X_ATTRIBUTE",
-                    "value": "mctScrollX"
-                },
-                {
-                    "key": "MCT_SCROLL_Y_PROPERTY",
-                    "value": "scrollTop"
-                },
-                {
-                    "key": "MCT_SCROLL_Y_ATTRIBUTE",
-                    "value": "mctScrollY"
-                },
-                {
-                    "key": "THEME",
-                    "value": "unspecified",
-                    "priority": "fallback"
-                },
-                {
-                    "key": "ASSETS_PATH",
-                    "value": ".",
-                    "priority": "fallback"
-                }
-            ],
-            "containers": [
-                {
-                    "key": "accordion",
-                    "template": accordionTemplate,
-                    "attributes": [
-                        "label"
-                    ]
-                }
-            ],
-            "representations": [
-                {
-                    "key": "tree",
-                    "template": subtreeTemplate,
-                    "uses": [
-                        "composition"
-                    ],
-                    "type": "root",
-                    "priority": "preferred"
-                },
-                {
-                    "key": "tree",
-                    "template": treeTemplate
-                },
-                {
-                    "key": "subtree",
-                    "template": subtreeTemplate,
-                    "uses": [
-                        "composition"
-                    ]
-                },
-                {
-                    "key": "tree-node",
-                    "template": treeNodeTemplate,
-                    "uses": [
-                        "action"
-                    ]
-                },
-                {
-                    "key": "label",
-                    "template": labelTemplate,
-                    "uses": [
-                        "type",
-                        "location"
-                    ],
-                    "gestures": [
-                        "drag",
-                        "menu",
-                        "info"
-                    ]
-                },
-                {
-                    "key": "node",
-                    "template": labelTemplate,
-                    "uses": [
-                        "type"
-                    ],
-                    "gestures": [
-                        "drag",
-                        "menu"
-                    ]
-                },
-                {
-                    "key": "action-group",
-                    "template": actionGroupTemplate,
-                    "uses": [
-                        "action"
-                    ]
-                },
-                {
-                    "key": "switcher",
-                    "template": switcherTemplate,
-                    "uses": [
-                        "view"
-                    ]
-                },
-                {
-                    "key": "object-inspector",
-                    "template": objectInspectorTemplate
-                }
-            ],
-            "controls": [
-                {
-                    "key": "selector",
-                    "template": selectorTemplate
-                },
-                {
-                    "key": "datetime-picker",
-                    "template": datetimePickerTemplate
-                },
-                {
-                    "key": "datetime-field",
-                    "template": datetimeFieldTemplate
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "Normalize.css",
-                    "version": "1.1.2",
-                    "description": "Browser style normalization",
-                    "author": "Nicolas Gallagher, Jonathan Neal",
-                    "website": "http://necolas.github.io/normalize.css/",
-                    "copyright": "Copyright (c) Nicolas Gallagher and Jonathan Neal",
-                    "license": "license-mit",
-                    "link": "https://github.com/necolas/normalize.css/blob/v1.1.2/LICENSE.md"
-                },
-                {
-                    "name": "Zepto",
-                    "version": "1.1.6",
-                    "description": "DOM manipulation",
-                    "author": "Thomas Fuchs",
-                    "website": "http://zeptojs.com/",
-                    "copyright": "Copyright (c) 2010-2016 Thomas Fuchs",
-                    "license": "license-mit",
-                    "link": "https://github.com/madrobby/zepto/blob/master/MIT-LICENSE"
-                }
-            ]
+    return {
+        name:"platform/commonUI/general",
+        definition: {
+            "name": "General UI elements",
+            "description": "General UI elements, meant to be reused across modes",
+            "resources": "res",
+            "extensions": {
+                "services": [
+                    {
+                        "key": "urlService",
+                        "implementation": UrlService,
+                        "depends": [
+                            "$location"
+                        ]
+                    },
+                    {
+                        "key": "popupService",
+                        "implementation": PopupService,
+                        "depends": [
+                            "$document",
+                            "$window"
+                        ]
+                    }
+                ],
+                "runs": [
+                    {
+                        "implementation": StyleSheetLoader,
+                        "depends": [
+                            "stylesheets[]",
+                            "$document",
+                            "THEME",
+                            "ASSETS_PATH"
+                        ]
+                    },
+                    {
+                        "implementation": SplashScreenManager,
+                        "depends": [
+                            "$document"
+                        ]
+                    }
+                ],
+                "filters": [
+                    {
+                        "implementation": ReverseFilter,
+                        "key": "reverse"
+                    }
+                ],
+                "templates": [
+                    {
+                        "key": "bottombar",
+                        "template": bottombarTemplate
+                    },
+                    {
+                        "key": "action-button",
+                        "template": actionButtonTemplate
+                    },
+                    {
+                        "key": "input-filter",
+                        "template": inputFilterTemplate
+                    },
+                    {
+                        "key": "indicator",
+                        "template": indicatorTemplate
+                    },
+                    {
+                        "key": "message-banner",
+                        "template": messageBannerTemplate
+                    },
+                    {
+                        "key": "progress-bar",
+                        "template": progressBarTemplate
+                    },
+                    {
+                        "key": "time-controller",
+                        "template": timeControllerTemplate
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "TimeRangeController",
+                        "implementation": TimeRangeController,
+                        "depends": [
+                            "$scope",
+                            "$timeout",
+                            "formatService",
+                            "DEFAULT_TIME_FORMAT",
+                            "now"
+                        ]
+                    },
+                    {
+                        "key": "DateTimePickerController",
+                        "implementation": DateTimePickerController,
+                        "depends": [
+                            "$scope",
+                            "now"
+                        ]
+                    },
+                    {
+                        "key": "DateTimeFieldController",
+                        "implementation": DateTimeFieldController,
+                        "depends": [
+                            "$scope",
+                            "formatService",
+                            "DEFAULT_TIME_FORMAT"
+                        ]
+                    },
+                    {
+                        "key": "TreeNodeController",
+                        "implementation": TreeNodeController,
+                        "depends": [
+                            "$scope",
+                            "$timeout",
+                            "navigationService"
+                        ]
+                    },
+                    {
+                        "key": "ActionGroupController",
+                        "implementation": ActionGroupController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "ToggleController",
+                        "implementation": ToggleController
+                    },
+                    {
+                        "key": "ClickAwayController",
+                        "implementation": ClickAwayController,
+                        "depends": [
+                            "$document",
+                            "$timeout"
+                        ]
+                    },
+                    {
+                        "key": "ViewSwitcherController",
+                        "implementation": ViewSwitcherController,
+                        "depends": [
+                            "$scope",
+                            "$timeout"
+                        ]
+                    },
+                    {
+                        "key": "GetterSetterController",
+                        "implementation": GetterSetterController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "SelectorController",
+                        "implementation": SelectorController,
+                        "depends": [
+                            "objectService",
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "ObjectInspectorController",
+                        "implementation": ObjectInspectorController,
+                        "depends": [
+                            "$scope",
+                            "objectService"
+                        ]
+                    },
+                    {
+                        "key": "BannerController",
+                        "implementation": BannerController,
+                        "depends": [
+                            "$scope",
+                            "notificationService",
+                            "dialogService"
+                        ]
+                    }
+                ],
+                "directives": [
+                    {
+                        "key": "mctContainer",
+                        "implementation": MCTContainer,
+                        "depends": [
+                            "containers[]"
+                        ]
+                    },
+                    {
+                        "key": "mctDrag",
+                        "implementation": MCTDrag,
+                        "depends": [
+                            "$document",
+                            "agentService"
+                        ]
+                    },
+                    {
+                        "key": "mctSelectable",
+                        "implementation": MCTSelectable,
+                        "depends": [
+                            "openmct"
+                        ]
+                    },
+                    {
+                        "key": "mctClickElsewhere",
+                        "implementation": MCTClickElsewhere,
+                        "depends": [
+                            "$document"
+                        ]
+                    },
+                    {
+                        "key": "mctResize",
+                        "implementation": MCTResize,
+                        "depends": [
+                            "$timeout"
+                        ]
+                    },
+                    {
+                        "key": "mctPopup",
+                        "implementation": MCTPopup,
+                        "depends": [
+                            "$compile",
+                            "popupService"
+                        ]
+                    },
+                    {
+                        "key": "mctScrollX",
+                        "implementation": MCTScroll,
+                        "depends": [
+                            "$parse",
+                            "MCT_SCROLL_X_PROPERTY",
+                            "MCT_SCROLL_X_ATTRIBUTE"
+                        ]
+                    },
+                    {
+                        "key": "mctScrollY",
+                        "implementation": MCTScroll,
+                        "depends": [
+                            "$parse",
+                            "MCT_SCROLL_Y_PROPERTY",
+                            "MCT_SCROLL_Y_ATTRIBUTE"
+                        ]
+                    },
+                    {
+                        "key": "mctSplitPane",
+                        "implementation": MCTSplitPane,
+                        "depends": [
+                            "$parse",
+                            "$log",
+                            "$interval",
+                            "$window"
+                        ]
+                    },
+                    {
+                        "key": "mctSplitter",
+                        "implementation": MCTSplitter
+                    },
+                    {
+                        "key": "mctTree",
+                        "implementation": MCTTree,
+                        "depends": ['gestureService', 'openmct']
+                    },
+                    {
+                        "key": "mctIndicators",
+                        "implementation": MCTIndicators,
+                        "depends": ['openmct']
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "MCT_SCROLL_X_PROPERTY",
+                        "value": "scrollLeft"
+                    },
+                    {
+                        "key": "MCT_SCROLL_X_ATTRIBUTE",
+                        "value": "mctScrollX"
+                    },
+                    {
+                        "key": "MCT_SCROLL_Y_PROPERTY",
+                        "value": "scrollTop"
+                    },
+                    {
+                        "key": "MCT_SCROLL_Y_ATTRIBUTE",
+                        "value": "mctScrollY"
+                    },
+                    {
+                        "key": "THEME",
+                        "value": "unspecified",
+                        "priority": "fallback"
+                    },
+                    {
+                        "key": "ASSETS_PATH",
+                        "value": ".",
+                        "priority": "fallback"
+                    }
+                ],
+                "containers": [
+                    {
+                        "key": "accordion",
+                        "template": accordionTemplate,
+                        "attributes": [
+                            "label"
+                        ]
+                    }
+                ],
+                "representations": [
+                    {
+                        "key": "tree",
+                        "template": subtreeTemplate,
+                        "uses": [
+                            "composition"
+                        ],
+                        "type": "root",
+                        "priority": "preferred"
+                    },
+                    {
+                        "key": "tree",
+                        "template": treeTemplate
+                    },
+                    {
+                        "key": "subtree",
+                        "template": subtreeTemplate,
+                        "uses": [
+                            "composition"
+                        ]
+                    },
+                    {
+                        "key": "tree-node",
+                        "template": treeNodeTemplate,
+                        "uses": [
+                            "action"
+                        ]
+                    },
+                    {
+                        "key": "label",
+                        "template": labelTemplate,
+                        "uses": [
+                            "type",
+                            "location"
+                        ],
+                        "gestures": [
+                            "drag",
+                            "menu",
+                            "info"
+                        ]
+                    },
+                    {
+                        "key": "node",
+                        "template": labelTemplate,
+                        "uses": [
+                            "type"
+                        ],
+                        "gestures": [
+                            "drag",
+                            "menu"
+                        ]
+                    },
+                    {
+                        "key": "action-group",
+                        "template": actionGroupTemplate,
+                        "uses": [
+                            "action"
+                        ]
+                    },
+                    {
+                        "key": "switcher",
+                        "template": switcherTemplate,
+                        "uses": [
+                            "view"
+                        ]
+                    },
+                    {
+                        "key": "object-inspector",
+                        "template": objectInspectorTemplate
+                    }
+                ],
+                "controls": [
+                    {
+                        "key": "selector",
+                        "template": selectorTemplate
+                    },
+                    {
+                        "key": "datetime-picker",
+                        "template": datetimePickerTemplate
+                    },
+                    {
+                        "key": "datetime-field",
+                        "template": datetimeFieldTemplate
+                    }
+                ],
+                "licenses": [
+                    {
+                        "name": "Normalize.css",
+                        "version": "1.1.2",
+                        "description": "Browser style normalization",
+                        "author": "Nicolas Gallagher, Jonathan Neal",
+                        "website": "http://necolas.github.io/normalize.css/",
+                        "copyright": "Copyright (c) Nicolas Gallagher and Jonathan Neal",
+                        "license": "license-mit",
+                        "link": "https://github.com/necolas/normalize.css/blob/v1.1.2/LICENSE.md"
+                    },
+                    {
+                        "name": "Zepto",
+                        "version": "1.1.6",
+                        "description": "DOM manipulation",
+                        "author": "Thomas Fuchs",
+                        "website": "http://zeptojs.com/",
+                        "copyright": "Copyright (c) 2010-2016 Thomas Fuchs",
+                        "license": "license-mit",
+                        "link": "https://github.com/madrobby/zepto/blob/master/MIT-LICENSE"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/inspect/bundle.js

@@ -27,8 +27,7 @@ define([
     "./res/info-table.html",
     "./res/info-bubble.html",
     "./res/bubble.html",
-    "./res/templates/info-button.html",
-    'legacyRegistry'
+    "./res/templates/info-button.html"
 ], function (
     InfoGesture,
     InfoButtonGesture,
@@ -36,81 +35,83 @@ define([
     infoTableTemplate,
     infoBubbleTemplate,
     bubbleTemplate,
-    infoButtonTemplate,
-    legacyRegistry
+    infoButtonTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/inspect", {
-        "extensions": {
-            "templates": [
-                {
-                    "key": "info-table",
-                    "template": infoTableTemplate
-                },
-                {
-                    "key": "info-bubble",
-                    "template": infoBubbleTemplate
-                }
-            ],
-            "containers": [
-                {
-                    "key": "bubble",
-                    "template": bubbleTemplate,
-                    "attributes": [
-                        "bubbleTitle",
-                        "bubbleLayout"
-                    ],
-                    "alias": "bubble"
-                }
-            ],
-            "gestures": [
-                {
-                    "key": "info",
-                    "implementation": InfoGesture,
-                    "depends": [
-                        "$timeout",
-                        "agentService",
-                        "infoService",
-                        "INFO_HOVER_DELAY"
-                    ]
-                },
-                {
-                    "key": "infobutton",
-                    "implementation": InfoButtonGesture,
-                    "depends": [
-                        "$document",
-                        "agentService",
-                        "infoService"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "infoService",
-                    "implementation": InfoService,
-                    "depends": [
-                        "$compile",
-                        "$rootScope",
-                        "popupService",
-                        "agentService"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "INFO_HOVER_DELAY",
-                    "value": 2000
-                }
-            ],
-            "representations": [
-                {
-                    "key": "info-button",
-                    "template": infoButtonTemplate,
-                    "gestures": [
-                        "infobutton"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/commonUI/inspect",
+        definition: {
+            "extensions": {
+                "templates": [
+                    {
+                        "key": "info-table",
+                        "template": infoTableTemplate
+                    },
+                    {
+                        "key": "info-bubble",
+                        "template": infoBubbleTemplate
+                    }
+                ],
+                "containers": [
+                    {
+                        "key": "bubble",
+                        "template": bubbleTemplate,
+                        "attributes": [
+                            "bubbleTitle",
+                            "bubbleLayout"
+                        ],
+                        "alias": "bubble"
+                    }
+                ],
+                "gestures": [
+                    {
+                        "key": "info",
+                        "implementation": InfoGesture,
+                        "depends": [
+                            "$timeout",
+                            "agentService",
+                            "infoService",
+                            "INFO_HOVER_DELAY"
+                        ]
+                    },
+                    {
+                        "key": "infobutton",
+                        "implementation": InfoButtonGesture,
+                        "depends": [
+                            "$document",
+                            "agentService",
+                            "infoService"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "infoService",
+                        "implementation": InfoService,
+                        "depends": [
+                            "$compile",
+                            "$rootScope",
+                            "popupService",
+                            "agentService"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "INFO_HOVER_DELAY",
+                        "value": 2000
+                    }
+                ],
+                "representations": [
+                    {
+                        "key": "info-button",
+                        "template": infoButtonTemplate,
+                        "gestures": [
+                            "infobutton"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/mobile/bundle.js

@@ -23,44 +23,45 @@
 define([
     "./src/MCTDevice",
     "./src/AgentService",
-    "./src/DeviceClassifier",
-    'legacyRegistry'
+    "./src/DeviceClassifier"
 ], function (
     MCTDevice,
     AgentService,
-    DeviceClassifier,
-    legacyRegistry
+    DeviceClassifier
 ) {
 
-    legacyRegistry.register("platform/commonUI/mobile", {
-        "extensions": {
-            "directives": [
-                {
-                    "key": "mctDevice",
-                    "implementation": MCTDevice,
-                    "depends": [
-                        "agentService"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "agentService",
-                    "implementation": AgentService,
-                    "depends": [
-                        "$window"
-                    ]
-                }
-            ],
-            "runs": [
-                {
-                    "implementation": DeviceClassifier,
-                    "depends": [
-                        "agentService",
-                        "$document"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/commonUI/mobile",
+        definition: {
+            "extensions": {
+                "directives": [
+                    {
+                        "key": "mctDevice",
+                        "implementation": MCTDevice,
+                        "depends": [
+                            "agentService"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "agentService",
+                        "implementation": AgentService,
+                        "depends": [
+                            "$window"
+                        ]
+                    }
+                ],
+                "runs": [
+                    {
+                        "implementation": DeviceClassifier,
+                        "depends": [
+                            "agentService",
+                            "$document"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/notification/bundle.js

@@ -24,52 +24,53 @@ define([
     "./src/NotificationIndicatorController",
     "./src/NotificationIndicator",
     "./src/NotificationService",
-    "./res/notification-indicator.html",
-    'legacyRegistry'
+    "./res/notification-indicator.html"
 ], function (
     NotificationIndicatorController,
     NotificationIndicator,
     NotificationService,
-    notificationIndicatorTemplate,
-    legacyRegistry
+    notificationIndicatorTemplate
 ) {
 
-    legacyRegistry.register("platform/commonUI/notification", {
-        "extensions": {
-            "templates": [
-                {
-                    "key": "notificationIndicatorTemplate",
-                    "template": notificationIndicatorTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "NotificationIndicatorController",
-                    "implementation": NotificationIndicatorController,
-                    "depends": [
-                        "$scope",
-                        "openmct",
-                        "dialogService"
-                    ]
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": NotificationIndicator,
-                    "priority": "fallback"
-                }
-            ],
-            "services": [
-                {
-                    "key": "notificationService",
-                    "implementation": function (openmct) {
-                        return new NotificationService.default(openmct);
-                    },
-                    "depends": [
-                        "openmct"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/commonUI/notification",
+        definition: {
+            "extensions": {
+                "templates": [
+                    {
+                        "key": "notificationIndicatorTemplate",
+                        "template": notificationIndicatorTemplate
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "NotificationIndicatorController",
+                        "implementation": NotificationIndicatorController,
+                        "depends": [
+                            "$scope",
+                            "openmct",
+                            "dialogService"
+                        ]
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": NotificationIndicator,
+                        "priority": "fallback"
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "notificationService",
+                        "implementation": function (openmct) {
+                            return new NotificationService.default(openmct);
+                        },
+                        "depends": [
+                            "openmct"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/commonUI/regions/bundle.js

@@ -22,33 +22,34 @@
 
 define([
     './src/InspectorController',
-    './src/EditableRegionPolicy',
-    'legacyRegistry'
+    './src/EditableRegionPolicy'
 ], function (
     InspectorController,
-    EditableRegionPolicy,
-    legacyRegistry
+    EditableRegionPolicy
 ) {
 
-    legacyRegistry.register("platform/commonUI/regions", {
-        "extensions": {
-            "controllers": [
-                {
-                    "key": "InspectorController",
-                    "implementation": InspectorController,
-                    "depends": [
-                        "$scope",
-                        "openmct",
-                        "$document"
-                    ]
-                }
-            ],
-            "policies": [
-                {
-                    "category": "region",
-                    "implementation": EditableRegionPolicy
-                }
-            ]
+    return {
+        name:"platform/commonUI/regions",
+        definition: {
+            "extensions": {
+                "controllers": [
+                    {
+                        "key": "InspectorController",
+                        "implementation": InspectorController,
+                        "depends": [
+                            "$scope",
+                            "openmct",
+                            "$document"
+                        ]
+                    }
+                ],
+                "policies": [
+                    {
+                        "category": "region",
+                        "implementation": EditableRegionPolicy
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/containment/bundle.js

@@ -25,51 +25,52 @@ define([
     "./src/CompositionMutabilityPolicy",
     "./src/CompositionModelPolicy",
     "./src/ComposeActionPolicy",
-    "./src/PersistableCompositionPolicy",
-    'legacyRegistry'
+    "./src/PersistableCompositionPolicy"
 ], function (
     CompositionPolicy,
     CompositionMutabilityPolicy,
     CompositionModelPolicy,
     ComposeActionPolicy,
-    PersistableCompositionPolicy,
-    legacyRegistry
+    PersistableCompositionPolicy
 ) {
 
-    legacyRegistry.register("platform/containment", {
-        "extensions": {
-            "policies": [
-                {
-                    "category": "composition",
-                    "implementation": CompositionPolicy,
-                    "message": "Objects of this type cannot contain objects of that type."
-                },
-                {
-                    "category": "composition",
-                    "implementation": CompositionMutabilityPolicy,
-                    "message": "Objects of this type cannot be modified."
-                },
-                {
-                    "category": "composition",
-                    "implementation": CompositionModelPolicy,
-                    "message": "Objects of this type cannot contain other objects."
-                },
-                {
-                    "category": "action",
-                    "implementation": ComposeActionPolicy,
-                    "depends": [
-                        "$injector",
-                        "openmct"
-                    ],
-                    "message": "Objects of this type cannot contain objects of that type."
-                },
-                {
-                    "category": "composition",
-                    "implementation": PersistableCompositionPolicy,
-                    "depends": ["openmct"],
-                    "message": "Change cannot be made to composition of non-persistable object"
-                }
-            ]
+    return {
+        name:"platform/containment",
+        definition: {
+            "extensions": {
+                "policies": [
+                    {
+                        "category": "composition",
+                        "implementation": CompositionPolicy,
+                        "message": "Objects of this type cannot contain objects of that type."
+                    },
+                    {
+                        "category": "composition",
+                        "implementation": CompositionMutabilityPolicy,
+                        "message": "Objects of this type cannot be modified."
+                    },
+                    {
+                        "category": "composition",
+                        "implementation": CompositionModelPolicy,
+                        "message": "Objects of this type cannot contain other objects."
+                    },
+                    {
+                        "category": "action",
+                        "implementation": ComposeActionPolicy,
+                        "depends": [
+                            "$injector",
+                            "openmct"
+                        ],
+                        "message": "Objects of this type cannot contain objects of that type."
+                    },
+                    {
+                        "category": "composition",
+                        "implementation": PersistableCompositionPolicy,
+                        "depends": ["openmct"],
+                        "message": "Change cannot be made to composition of non-persistable object"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/core/bundle.js

@@ -49,8 +49,7 @@ define([
     "./src/services/Now",
     "./src/services/Throttle",
     "./src/services/Topic",
-    "./src/services/Instantiate",
-    'legacyRegistry'
+    "./src/services/Instantiate"
 ], function (
     DomainObjectProvider,
     CoreCapabilityProvider,
@@ -80,312 +79,314 @@ define([
     Now,
     Throttle,
     Topic,
-    Instantiate,
-    legacyRegistry
+    Instantiate
 ) {
 
-    legacyRegistry.register("platform/core", {
-        "name": "Open MCT Core",
-        "description": "Defines core concepts of Open MCT.",
-        "sources": "src",
-        "configuration": {
-            "paths": {
-                "uuid": "uuid"
-            }
-        },
-        "extensions": {
-            "components": [
-                {
-                    "provides": "objectService",
-                    "type": "provider",
-                    "implementation": DomainObjectProvider,
-                    "depends": [
-                        "modelService",
-                        "instantiate"
-                    ]
-                },
-                {
-                    "provides": "capabilityService",
-                    "type": "provider",
-                    "implementation": CoreCapabilityProvider,
-                    "depends": [
-                        "capabilities[]",
-                        "$log"
-                    ]
-                },
-                {
-                    "provides": "modelService",
-                    "type": "provider",
-                    "implementation": StaticModelProvider,
-                    "depends": [
-                        "models[]",
-                        "$q",
-                        "$log"
-                    ]
-                },
-                {
-                    "provides": "modelService",
-                    "type": "aggregator",
-                    "implementation": ModelAggregator,
-                    "depends": [
-                        "$q"
-                    ]
-                },
-                {
-                    "provides": "modelService",
-                    "type": "provider",
-                    "implementation": PersistedModelProvider,
-                    "depends": [
-                        "persistenceService",
-                        "$q",
-                        "now",
-                        "PERSISTENCE_SPACE"
-                    ]
-                },
-                {
-                    "provides": "modelService",
-                    "type": "decorator",
-                    "implementation": CachingModelDecorator,
-                    "depends": [
-                        "cacheService"
-                    ]
-                },
-                {
-                    "provides": "modelService",
-                    "type": "decorator",
-                    "priority": "fallback",
-                    "implementation": MissingModelDecorator
-                },
-                {
-                    "provides": "typeService",
-                    "type": "provider",
-                    "implementation": TypeProvider,
-                    "depends": [
-                        "types[]"
-                    ]
-                },
-                {
-                    "provides": "actionService",
-                    "type": "provider",
-                    "implementation": ActionProvider,
-                    "depends": [
-                        "actions[]",
-                        "$log"
-                    ]
-                },
-                {
-                    "provides": "actionService",
-                    "type": "aggregator",
-                    "implementation": ActionAggregator
-                },
-                {
-                    "provides": "actionService",
-                    "type": "decorator",
-                    "implementation": LoggingActionDecorator,
-                    "depends": [
-                        "$log"
-                    ]
-                },
-                {
-                    "provides": "viewService",
-                    "type": "provider",
-                    "implementation": ViewProvider,
-                    "depends": [
-                        "views[]",
-                        "$log"
-                    ]
-                },
-                {
-                    "provides": "identifierService",
-                    "type": "provider",
-                    "implementation": IdentifierProvider,
-                    "depends": [
-                        "PERSISTENCE_SPACE"
-                    ]
+    return {
+        name:"platform/core",
+        definition: {
+            "name": "Open MCT Core",
+            "description": "Defines core concepts of Open MCT.",
+            "sources": "src",
+            "configuration": {
+                "paths": {
+                    "uuid": "uuid"
                 }
-            ],
-            "types": [
-                {
-                    "properties": [
-                        {
-                            "control": "textfield",
-                            "name": "Title",
-                            "key": "name",
-                            "property": "name",
-                            "pattern": "\\S+",
-                            "required": true,
-                            "cssClass": "l-input-lg"
-                        },
-                        {
-                            "name": "Notes",
-                            "key": "notes",
-                            "property": "notes",
-                            "control": "textarea",
-                            "required": false,
-                            "cssClass": "l-textarea-sm"
-                        }
-                    ]
-                },
-                {
-                    "key": "root",
-                    "name": "Root",
-                    "cssClass": "icon-folder"
-                },
-                {
-                    "key": "folder",
-                    "name": "Folder",
-                    "cssClass": "icon-folder",
-                    "features": "creation",
-                    "description": "Create folders to organize other objects or links to objects.",
-                    "priority": 1000,
-                    "model": {
-                        "composition": []
+            },
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "objectService",
+                        "type": "provider",
+                        "implementation": DomainObjectProvider,
+                        "depends": [
+                            "modelService",
+                            "instantiate"
+                        ]
+                    },
+                    {
+                        "provides": "capabilityService",
+                        "type": "provider",
+                        "implementation": CoreCapabilityProvider,
+                        "depends": [
+                            "capabilities[]",
+                            "$log"
+                        ]
+                    },
+                    {
+                        "provides": "modelService",
+                        "type": "provider",
+                        "implementation": StaticModelProvider,
+                        "depends": [
+                            "models[]",
+                            "$q",
+                            "$log"
+                        ]
+                    },
+                    {
+                        "provides": "modelService",
+                        "type": "aggregator",
+                        "implementation": ModelAggregator,
+                        "depends": [
+                            "$q"
+                        ]
+                    },
+                    {
+                        "provides": "modelService",
+                        "type": "provider",
+                        "implementation": PersistedModelProvider,
+                        "depends": [
+                            "persistenceService",
+                            "$q",
+                            "now",
+                            "PERSISTENCE_SPACE"
+                        ]
+                    },
+                    {
+                        "provides": "modelService",
+                        "type": "decorator",
+                        "implementation": CachingModelDecorator,
+                        "depends": [
+                            "cacheService"
+                        ]
+                    },
+                    {
+                        "provides": "modelService",
+                        "type": "decorator",
+                        "priority": "fallback",
+                        "implementation": MissingModelDecorator
+                    },
+                    {
+                        "provides": "typeService",
+                        "type": "provider",
+                        "implementation": TypeProvider,
+                        "depends": [
+                            "types[]"
+                        ]
+                    },
+                    {
+                        "provides": "actionService",
+                        "type": "provider",
+                        "implementation": ActionProvider,
+                        "depends": [
+                            "actions[]",
+                            "$log"
+                        ]
+                    },
+                    {
+                        "provides": "actionService",
+                        "type": "aggregator",
+                        "implementation": ActionAggregator
+                    },
+                    {
+                        "provides": "actionService",
+                        "type": "decorator",
+                        "implementation": LoggingActionDecorator,
+                        "depends": [
+                            "$log"
+                        ]
+                    },
+                    {
+                        "provides": "viewService",
+                        "type": "provider",
+                        "implementation": ViewProvider,
+                        "depends": [
+                            "views[]",
+                            "$log"
+                        ]
+                    },
+                    {
+                        "provides": "identifierService",
+                        "type": "provider",
+                        "implementation": IdentifierProvider,
+                        "depends": [
+                            "PERSISTENCE_SPACE"
+                        ]
                     }
-                },
-                {
-                    "key": "unknown",
-                    "name": "Unknown Type",
-                    "cssClass": "icon-object-unknown"
-                },
-                {
-                    "name": "Unknown Type",
-                    "cssClass": "icon-object-unknown"
-                }
-            ],
-            "capabilities": [
-                {
-                    "key": "composition",
-                    "implementation": CompositionCapability,
-                    "depends": [
-                        "$injector"
-                    ]
-                },
-                {
-                    "key": "relationship",
-                    "implementation": RelationshipCapability,
-                    "depends": [
-                        "$injector"
-                    ]
-                },
-                {
-                    "key": "type",
-                    "implementation": TypeCapability,
-                    "depends": [
-                        "typeService"
-                    ]
-                },
-                {
-                    "key": "action",
-                    "implementation": ActionCapability,
-                    "depends": [
-                        "$q",
-                        "actionService"
-                    ]
-                },
-                {
-                    "key": "view",
-                    "implementation": ViewCapability,
-                    "depends": [
-                        "viewService"
-                    ]
-                },
-                {
-                    "key": "persistence",
-                    "implementation": PersistenceCapability,
-                    "depends": [
-                        "cacheService",
-                        "persistenceService",
-                        "identifierService",
-                        "notificationService",
-                        "$q"
-                    ]
-                },
-                {
-                    "key": "metadata",
-                    "implementation": MetadataCapability
-                },
-                {
-                    "key": "mutation",
-                    "implementation": MutationCapability,
-                    "depends": [
-                        "topic",
-                        "now"
-                    ]
-                },
-                {
-                    "key": "delegation",
-                    "implementation": DelegationCapability,
-                    "depends": [
-                        "$q"
-                    ]
-                },
-                {
-                    "key": "instantiation",
-                    "implementation": InstantiationCapability,
-                    "depends": [
-                        "$injector",
-                        "identifierService",
-                        "now"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "cacheService",
-                    "implementation": ModelCacheService
-                },
-                {
-                    "key": "now",
-                    "implementation": Now
-                },
-                {
-                    "key": "throttle",
-                    "implementation": Throttle,
-                    "depends": [
-                        "$timeout"
-                    ]
-                },
-                {
-                    "key": "topic",
-                    "implementation": Topic,
-                    "depends": [
-                        "$log"
-                    ]
-                },
-                {
-                    "key": "instantiate",
-                    "implementation": Instantiate,
-                    "depends": [
-                        "capabilityService",
-                        "identifierService",
-                        "cacheService"
-                    ]
-                }
-            ],
-            "runs": [
-                {
-                    "implementation": TransactingMutationListener,
-                    "depends": ["topic", "transactionService", "cacheService"]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_SPACE",
-                    "value": "mct"
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "Math.uuid.js",
-                    "version": "1.4.7",
-                    "description": "Unique identifer generation (code adapted.)",
-                    "author": "Robert Kieffer",
-                    "website": "https://github.com/broofa/node-uuid",
-                    "copyright": "Copyright (c) 2010-2012 Robert Kieffer",
-                    "license": "license-mit",
-                    "link": "http://opensource.org/licenses/MIT"
-                }
-            ]
+                ],
+                "types": [
+                    {
+                        "properties": [
+                            {
+                                "control": "textfield",
+                                "name": "Title",
+                                "key": "name",
+                                "property": "name",
+                                "pattern": "\\S+",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            },
+                            {
+                                "name": "Notes",
+                                "key": "notes",
+                                "property": "notes",
+                                "control": "textarea",
+                                "required": false,
+                                "cssClass": "l-textarea-sm"
+                            }
+                        ]
+                    },
+                    {
+                        "key": "root",
+                        "name": "Root",
+                        "cssClass": "icon-folder"
+                    },
+                    {
+                        "key": "folder",
+                        "name": "Folder",
+                        "cssClass": "icon-folder",
+                        "features": "creation",
+                        "description": "Create folders to organize other objects or links to objects.",
+                        "priority": 1000,
+                        "model": {
+                            "composition": []
+                        }
+                    },
+                    {
+                        "key": "unknown",
+                        "name": "Unknown Type",
+                        "cssClass": "icon-object-unknown"
+                    },
+                    {
+                        "name": "Unknown Type",
+                        "cssClass": "icon-object-unknown"
+                    }
+                ],
+                "capabilities": [
+                    {
+                        "key": "composition",
+                        "implementation": CompositionCapability,
+                        "depends": [
+                            "$injector"
+                        ]
+                    },
+                    {
+                        "key": "relationship",
+                        "implementation": RelationshipCapability,
+                        "depends": [
+                            "$injector"
+                        ]
+                    },
+                    {
+                        "key": "type",
+                        "implementation": TypeCapability,
+                        "depends": [
+                            "typeService"
+                        ]
+                    },
+                    {
+                        "key": "action",
+                        "implementation": ActionCapability,
+                        "depends": [
+                            "$q",
+                            "actionService"
+                        ]
+                    },
+                    {
+                        "key": "view",
+                        "implementation": ViewCapability,
+                        "depends": [
+                            "viewService"
+                        ]
+                    },
+                    {
+                        "key": "persistence",
+                        "implementation": PersistenceCapability,
+                        "depends": [
+                            "cacheService",
+                            "persistenceService",
+                            "identifierService",
+                            "notificationService",
+                            "$q"
+                        ]
+                    },
+                    {
+                        "key": "metadata",
+                        "implementation": MetadataCapability
+                    },
+                    {
+                        "key": "mutation",
+                        "implementation": MutationCapability,
+                        "depends": [
+                            "topic",
+                            "now"
+                        ]
+                    },
+                    {
+                        "key": "delegation",
+                        "implementation": DelegationCapability,
+                        "depends": [
+                            "$q"
+                        ]
+                    },
+                    {
+                        "key": "instantiation",
+                        "implementation": InstantiationCapability,
+                        "depends": [
+                            "$injector",
+                            "identifierService",
+                            "now"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "cacheService",
+                        "implementation": ModelCacheService
+                    },
+                    {
+                        "key": "now",
+                        "implementation": Now
+                    },
+                    {
+                        "key": "throttle",
+                        "implementation": Throttle,
+                        "depends": [
+                            "$timeout"
+                        ]
+                    },
+                    {
+                        "key": "topic",
+                        "implementation": Topic,
+                        "depends": [
+                            "$log"
+                        ]
+                    },
+                    {
+                        "key": "instantiate",
+                        "implementation": Instantiate,
+                        "depends": [
+                            "capabilityService",
+                            "identifierService",
+                            "cacheService"
+                        ]
+                    }
+                ],
+                "runs": [
+                    {
+                        "implementation": TransactingMutationListener,
+                        "depends": ["topic", "transactionService", "cacheService"]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_SPACE",
+                        "value": "mct"
+                    }
+                ],
+                "licenses": [
+                    {
+                        "name": "Math.uuid.js",
+                        "version": "1.4.7",
+                        "description": "Unique identifer generation (code adapted.)",
+                        "author": "Robert Kieffer",
+                        "website": "https://github.com/broofa/node-uuid",
+                        "copyright": "Copyright (c) 2010-2012 Robert Kieffer",
+                        "license": "license-mit",
+                        "link": "http://opensource.org/licenses/MIT"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/entanglement/bundle.js

@@ -34,8 +34,7 @@ define([
     "./src/services/MoveService",
     "./src/services/LinkService",
     "./src/services/CopyService",
-    "./src/services/LocationService",
-    'legacyRegistry'
+    "./src/services/LocationService"
 ], function (
     MoveAction,
     CopyAction,
@@ -50,152 +49,154 @@ define([
     MoveService,
     LinkService,
     CopyService,
-    LocationService,
-    legacyRegistry
+    LocationService
 ) {
 
-    legacyRegistry.register("platform/entanglement", {
-        "name": "Entanglement",
-        "description": "Tools to assist you in entangling the world of WARP.",
-        "configuration": {},
-        "extensions": {
-            "actions": [
-                {
-                    "key": "move",
-                    "name": "Move",
-                    "description": "Move object to another location.",
-                    "cssClass": "icon-move",
-                    "category": "contextual",
-                    "implementation": MoveAction,
-                    "depends": [
-                        "policyService",
-                        "locationService",
-                        "moveService"
-                    ]
-                },
-                {
-                    "key": "copy",
-                    "name": "Duplicate",
-                    "description": "Duplicate object to another location.",
-                    "cssClass": "icon-duplicate",
-                    "category": "contextual",
-                    "implementation": CopyAction,
-                    "depends": [
-                        "$log",
-                        "policyService",
-                        "locationService",
-                        "copyService",
-                        "dialogService",
-                        "notificationService"
-                    ]
-                },
-                {
-                    "key": "link",
-                    "name": "Create Link",
-                    "description": "Create Link to object in another location.",
-                    "cssClass": "icon-link",
-                    "category": "contextual",
-                    "implementation": LinkAction,
-                    "depends": [
-                        "policyService",
-                        "locationService",
-                        "linkService"
-                    ]
-                },
-                {
-                    "key": "locate",
-                    "name": "Set Primary Location",
-                    "description": "Set a domain object's primary location.",
-                    "cssClass": "",
-                    "category": "contextual",
-                    "implementation": SetPrimaryLocationAction
-                }
-            ],
-            "components": [
-                {
-                    "type": "decorator",
-                    "provides": "creationService",
-                    "implementation": LocatingCreationDecorator
-                },
-                {
-                    "type": "decorator",
-                    "provides": "objectService",
-                    "implementation": LocatingObjectDecorator,
-                    "depends": [
-                        "$q",
-                        "$log"
-                    ]
-                }
-            ],
-            "policies": [
-                {
-                    "category": "action",
-                    "implementation": CrossSpacePolicy
-                },
-                {
-                    "category": "action",
-                    "implementation": CopyPolicy
-                },
-                {
-                    "category": "action",
-                    "implementation": MovePolicy
-                }
-            ],
-            "capabilities": [
-                {
-                    "key": "location",
-                    "name": "Location Capability",
-                    "description": "Provides a capability for retrieving the location of an object based upon it's context.",
-                    "implementation": LocationCapability,
-                    "depends": [
-                        "$q",
-                        "$injector"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "moveService",
-                    "name": "Move Service",
-                    "description": "Provides a service for moving objects",
-                    "implementation": MoveService,
-                    "depends": [
-                        "openmct",
-                        "linkService",
-                        "$q"
-                    ]
-                },
-                {
-                    "key": "linkService",
-                    "name": "Link Service",
-                    "description": "Provides a service for linking objects",
-                    "implementation": LinkService,
-                    "depends": [
-                        "openmct"
-                    ]
-                },
-                {
-                    "key": "copyService",
-                    "name": "Copy Service",
-                    "description": "Provides a service for copying objects",
-                    "implementation": CopyService,
-                    "depends": [
-                        "$q",
-                        "policyService",
-                        "openmct"
-                    ]
-                },
-                {
-                    "key": "locationService",
-                    "name": "Location Service",
-                    "description": "Provides a service for prompting a user for locations.",
-                    "implementation": LocationService,
-                    "depends": [
-                        "dialogService"
-                    ]
-                }
-            ],
-            "licenses": []
+    return {
+        name:"platform/entanglement",
+        definition: {
+            "name": "Entanglement",
+            "description": "Tools to assist you in entangling the world of WARP.",
+            "configuration": {},
+            "extensions": {
+                "actions": [
+                    {
+                        "key": "move",
+                        "name": "Move",
+                        "description": "Move object to another location.",
+                        "cssClass": "icon-move",
+                        "category": "contextual",
+                        "implementation": MoveAction,
+                        "depends": [
+                            "policyService",
+                            "locationService",
+                            "moveService"
+                        ]
+                    },
+                    {
+                        "key": "copy",
+                        "name": "Duplicate",
+                        "description": "Duplicate object to another location.",
+                        "cssClass": "icon-duplicate",
+                        "category": "contextual",
+                        "implementation": CopyAction,
+                        "depends": [
+                            "$log",
+                            "policyService",
+                            "locationService",
+                            "copyService",
+                            "dialogService",
+                            "notificationService"
+                        ]
+                    },
+                    {
+                        "key": "link",
+                        "name": "Create Link",
+                        "description": "Create Link to object in another location.",
+                        "cssClass": "icon-link",
+                        "category": "contextual",
+                        "implementation": LinkAction,
+                        "depends": [
+                            "policyService",
+                            "locationService",
+                            "linkService"
+                        ]
+                    },
+                    {
+                        "key": "locate",
+                        "name": "Set Primary Location",
+                        "description": "Set a domain object's primary location.",
+                        "cssClass": "",
+                        "category": "contextual",
+                        "implementation": SetPrimaryLocationAction
+                    }
+                ],
+                "components": [
+                    {
+                        "type": "decorator",
+                        "provides": "creationService",
+                        "implementation": LocatingCreationDecorator
+                    },
+                    {
+                        "type": "decorator",
+                        "provides": "objectService",
+                        "implementation": LocatingObjectDecorator,
+                        "depends": [
+                            "$q",
+                            "$log"
+                        ]
+                    }
+                ],
+                "policies": [
+                    {
+                        "category": "action",
+                        "implementation": CrossSpacePolicy
+                    },
+                    {
+                        "category": "action",
+                        "implementation": CopyPolicy
+                    },
+                    {
+                        "category": "action",
+                        "implementation": MovePolicy
+                    }
+                ],
+                "capabilities": [
+                    {
+                        "key": "location",
+                        "name": "Location Capability",
+                        "description": "Provides a capability for retrieving the location of an object based upon it's context.",
+                        "implementation": LocationCapability,
+                        "depends": [
+                            "$q",
+                            "$injector"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "moveService",
+                        "name": "Move Service",
+                        "description": "Provides a service for moving objects",
+                        "implementation": MoveService,
+                        "depends": [
+                            "openmct",
+                            "linkService",
+                            "$q"
+                        ]
+                    },
+                    {
+                        "key": "linkService",
+                        "name": "Link Service",
+                        "description": "Provides a service for linking objects",
+                        "implementation": LinkService,
+                        "depends": [
+                            "openmct"
+                        ]
+                    },
+                    {
+                        "key": "copyService",
+                        "name": "Copy Service",
+                        "description": "Provides a service for copying objects",
+                        "implementation": CopyService,
+                        "depends": [
+                            "$q",
+                            "policyService",
+                            "openmct"
+                        ]
+                    },
+                    {
+                        "key": "locationService",
+                        "name": "Location Service",
+                        "description": "Provides a service for prompting a user for locations.",
+                        "implementation": LocationService,
+                        "depends": [
+                            "dialogService"
+                        ]
+                    }
+                ],
+                "licenses": []
+            }
         }
-    });
+    };
 });

platform/execution/bundle.js

@@ -21,25 +21,26 @@
  *****************************************************************************/
 
 define([
-    "./src/WorkerService",
-    'legacyRegistry'
+    "./src/WorkerService"
 ], function (
-    WorkerService,
-    legacyRegistry
+    WorkerService
 ) {
 
-    legacyRegistry.register("platform/execution", {
-        "extensions": {
-            "services": [
-                {
-                    "key": "workerService",
-                    "implementation": WorkerService,
-                    "depends": [
-                        "$window",
-                        "workers[]"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/execution",
+        definition: {
+            "extensions": {
+                "services": [
+                    {
+                        "key": "workerService",
+                        "implementation": WorkerService,
+                        "depends": [
+                            "$window",
+                            "workers[]"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/exporters/bundle.js

@@ -22,42 +22,44 @@
 
 define([
     "./ExportService",
-    "saveAs",
-    "legacyRegistry"
-], function (ExportService, saveAs, legacyRegistry) {
+    "saveAs"
+], function (ExportService, saveAs) {
 
-    legacyRegistry.register("platform/exporters", {
-        extensions: {
-            services: [
-                {
-                    key: "exportService",
-                    implementation: function () {
-                        return new ExportService(saveAs.saveAs);
+    return {
+        name:"platform/exporters",
+        definition: {
+            extensions: {
+                services: [
+                    {
+                        key: "exportService",
+                        implementation: function () {
+                            return new ExportService(saveAs.saveAs);
+                        }
                     }
-                }
-            ],
-            licenses: [
-                {
-                    "name": "CSV.js",
-                    "version": "3.6.4",
-                    "author": "Kash Nouroozi",
-                    "description": "Encoder for CSV (comma separated values) export",
-                    "website": "https://github.com/knrz/CSV.js",
-                    "copyright": "Copyright (c) 2014 Kash Nouroozi",
-                    "license": "license-mit",
-                    "link": "https://github.com/knrz/CSV.js/blob/3.6.4/LICENSE"
-                },
-                {
-                    "name": "FileSaver.js",
-                    "version": "0.0.2",
-                    "author": "Eli Grey",
-                    "description": "File download initiator (for file exports)",
-                    "website": "https://github.com/eligrey/FileSaver.js/",
-                    "copyright": "Copyright © 2015 Eli Grey.",
-                    "license": "license-mit",
-                    "link": "https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md"
-                }
-            ]
+                ],
+                licenses: [
+                    {
+                        "name": "CSV.js",
+                        "version": "3.6.4",
+                        "author": "Kash Nouroozi",
+                        "description": "Encoder for CSV (comma separated values) export",
+                        "website": "https://github.com/knrz/CSV.js",
+                        "copyright": "Copyright (c) 2014 Kash Nouroozi",
+                        "license": "license-mit",
+                        "link": "https://github.com/knrz/CSV.js/blob/3.6.4/LICENSE"
+                    },
+                    {
+                        "name": "FileSaver.js",
+                        "version": "0.0.2",
+                        "author": "Eli Grey",
+                        "description": "File download initiator (for file exports)",
+                        "website": "https://github.com/eligrey/FileSaver.js/",
+                        "copyright": "Copyright © 2015 Eli Grey.",
+                        "license": "license-mit",
+                        "link": "https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/clock/bundle.js

@@ -35,8 +35,7 @@ define([
     "./src/actions/StopTimerAction",
     "./src/actions/PauseTimerAction",
     "./res/templates/clock.html",
-    "./res/templates/timer.html",
-    'legacyRegistry'
+    "./res/templates/timer.html"
 ], function (
     MomentTimezone,
     ClockIndicator,
@@ -52,269 +51,271 @@ define([
     StopTimerAction,
     PauseTimerAction,
     clockTemplate,
-    timerTemplate,
-    legacyRegistry
+    timerTemplate
 ) {
-    legacyRegistry.register("platform/features/clock", {
-        "name": "Clocks/Timers",
-        "descriptions": "Domain objects for displaying current & relative times.",
-        "configuration": {
-            "paths": {
-                "moment-duration-format": "moment-duration-format"
+    return {
+        name:"platform/features/clock",
+        definition: {
+            "name": "Clocks/Timers",
+            "descriptions": "Domain objects for displaying current & relative times.",
+            "configuration": {
+                "paths": {
+                    "moment-duration-format": "moment-duration-format"
+                },
+                "shim": {
+                    "moment-duration-format": {
+                        "deps": [
+                            "moment"
+                        ]
+                    }
+                }
             },
-            "shim": {
-                "moment-duration-format": {
-                    "deps": [
-                        "moment"
-                    ]
-                }
-            }
-        },
-        "extensions": {
-            "constants": [
-                {
-                    "key": "CLOCK_INDICATOR_FORMAT",
-                    "value": "YYYY/MM/DD HH:mm:ss"
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": ClockIndicator,
-                    "depends": [
-                        "tickerService",
-                        "CLOCK_INDICATOR_FORMAT"
-                    ],
-                    "priority": "preferred"
-                }
-            ],
-            "services": [
-                {
-                    "key": "tickerService",
-                    "implementation": TickerService,
-                    "depends": [
-                        "$timeout",
-                        "now"
-                    ]
-                },
-                {
-                    "key": "timerService",
-                    "implementation": TimerService,
-                    "depends": ["openmct"]
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "ClockController",
-                    "implementation": ClockController,
-                    "depends": [
-                        "$scope",
-                        "tickerService"
-                    ]
-                },
-                {
-                    "key": "TimerController",
-                    "implementation": TimerController,
-                    "depends": [
-                        "$scope",
-                        "$window",
-                        "now"
-                    ]
-                },
-                {
-                    "key": "RefreshingController",
-                    "implementation": RefreshingController,
-                    "depends": [
-                        "$scope",
-                        "tickerService"
-                    ]
-                }
-            ],
-            "views": [
-                {
-                    "key": "clock",
-                    "type": "clock",
-                    "editable": false,
-                    "template": clockTemplate
-                },
-                {
-                    "key": "timer",
-                    "type": "timer",
-                    "editable": false,
-                    "template": timerTemplate
-                }
-            ],
-            "actions": [
-                {
-                    "key": "timer.follow",
-                    "implementation": FollowTimerAction,
-                    "depends": ["timerService"],
-                    "category": "contextual",
-                    "name": "Follow Timer",
-                    "cssClass": "icon-clock",
-                    "priority": "optional"
-                },
-                {
-                    "key": "timer.start",
-                    "implementation": StartTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Start",
-                    "cssClass": "icon-play",
-                    "priority": "preferred"
-                },
-                {
-                    "key": "timer.pause",
-                    "implementation": PauseTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Pause",
-                    "cssClass": "icon-pause",
-                    "priority": "preferred"
-                },
-                {
-                    "key": "timer.restart",
-                    "implementation": RestartTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Restart at 0",
-                    "cssClass": "icon-refresh",
-                    "priority": "preferred"
-                },
-                {
-                    "key": "timer.stop",
-                    "implementation": StopTimerAction,
-                    "depends": [
-                        "now"
-                    ],
-                    "category": "contextual",
-                    "name": "Stop",
-                    "cssClass": "icon-box",
-                    "priority": "preferred"
-                }
-            ],
-            "types": [
-                {
-                    "key": "clock",
-                    "name": "Clock",
-                    "cssClass": "icon-clock",
-                    "description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
-                    "priority": 101,
-                    "features": [
-                        "creation"
-                    ],
-                    "properties": [
-                        {
-                            "key": "clockFormat",
-                            "name": "Display Format",
-                            "control": "composite",
-                            "items": [
-                                {
-                                    "control": "select",
-                                    "options": [
-                                        {
-                                            "value": "YYYY/MM/DD hh:mm:ss",
-                                            "name": "YYYY/MM/DD hh:mm:ss"
-                                        },
-                                        {
-                                            "value": "YYYY/DDD hh:mm:ss",
-                                            "name": "YYYY/DDD hh:mm:ss"
-                                        },
-                                        {
-                                            "value": "hh:mm:ss",
-                                            "name": "hh:mm:ss"
-                                        }
-                                    ],
-                                    "cssClass": "l-inline"
-                                },
-                                {
-                                    "control": "select",
-                                    "options": [
-                                        {
-                                            "value": "clock12",
-                                            "name": "12hr"
-                                        },
-                                        {
-                                            "value": "clock24",
-                                            "name": "24hr"
-                                        }
-                                    ],
-                                    "cssClass": "l-inline"
-                                }
-                            ]
-                        },
-                        {
-                            "key": "timezone",
-                            "name": "Timezone",
-                            "control": "autocomplete",
-                            "options": MomentTimezone.tz.names()
-                        }
-                    ],
-                    "model": {
-                        "clockFormat": [
-                            "YYYY/MM/DD hh:mm:ss",
-                            "clock12"
+            "extensions": {
+                "constants": [
+                    {
+                        "key": "CLOCK_INDICATOR_FORMAT",
+                        "value": "YYYY/MM/DD HH:mm:ss"
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": ClockIndicator,
+                        "depends": [
+                            "tickerService",
+                            "CLOCK_INDICATOR_FORMAT"
                         ],
-                        "timezone": "UTC"
+                        "priority": "preferred"
                     }
-                },
-                {
-                    "key": "timer",
-                    "name": "Timer",
-                    "cssClass": "icon-timer",
-                    "description": "A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.",
-                    "priority": 100,
-                    "features": [
-                        "creation"
-                    ],
-                    "properties": [
-                        {
-                            "key": "timestamp",
-                            "control": "datetime",
-                            "name": "Target"
-                        },
-                        {
-                            "key": "timerFormat",
-                            "control": "select",
-                            "name": "Display Format",
-                            "options": [
-                                {
-                                    "value": "long",
-                                    "name": "DDD hh:mm:ss"
-                                },
-                                {
-                                    "value": "short",
-                                    "name": "hh:mm:ss"
-                                }
-                            ]
+                ],
+                "services": [
+                    {
+                        "key": "tickerService",
+                        "implementation": TickerService,
+                        "depends": [
+                            "$timeout",
+                            "now"
+                        ]
+                    },
+                    {
+                        "key": "timerService",
+                        "implementation": TimerService,
+                        "depends": ["openmct"]
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "ClockController",
+                        "implementation": ClockController,
+                        "depends": [
+                            "$scope",
+                            "tickerService"
+                        ]
+                    },
+                    {
+                        "key": "TimerController",
+                        "implementation": TimerController,
+                        "depends": [
+                            "$scope",
+                            "$window",
+                            "now"
+                        ]
+                    },
+                    {
+                        "key": "RefreshingController",
+                        "implementation": RefreshingController,
+                        "depends": [
+                            "$scope",
+                            "tickerService"
+                        ]
+                    }
+                ],
+                "views": [
+                    {
+                        "key": "clock",
+                        "type": "clock",
+                        "editable": false,
+                        "template": clockTemplate
+                    },
+                    {
+                        "key": "timer",
+                        "type": "timer",
+                        "editable": false,
+                        "template": timerTemplate
+                    }
+                ],
+                "actions": [
+                    {
+                        "key": "timer.follow",
+                        "implementation": FollowTimerAction,
+                        "depends": ["timerService"],
+                        "category": "contextual",
+                        "name": "Follow Timer",
+                        "cssClass": "icon-clock",
+                        "priority": "optional"
+                    },
+                    {
+                        "key": "timer.start",
+                        "implementation": StartTimerAction,
+                        "depends": [
+                            "now"
+                        ],
+                        "category": "contextual",
+                        "name": "Start",
+                        "cssClass": "icon-play",
+                        "priority": "preferred"
+                    },
+                    {
+                        "key": "timer.pause",
+                        "implementation": PauseTimerAction,
+                        "depends": [
+                            "now"
+                        ],
+                        "category": "contextual",
+                        "name": "Pause",
+                        "cssClass": "icon-pause",
+                        "priority": "preferred"
+                    },
+                    {
+                        "key": "timer.restart",
+                        "implementation": RestartTimerAction,
+                        "depends": [
+                            "now"
+                        ],
+                        "category": "contextual",
+                        "name": "Restart at 0",
+                        "cssClass": "icon-refresh",
+                        "priority": "preferred"
+                    },
+                    {
+                        "key": "timer.stop",
+                        "implementation": StopTimerAction,
+                        "depends": [
+                            "now"
+                        ],
+                        "category": "contextual",
+                        "name": "Stop",
+                        "cssClass": "icon-box",
+                        "priority": "preferred"
+                    }
+                ],
+                "types": [
+                    {
+                        "key": "clock",
+                        "name": "Clock",
+                        "cssClass": "icon-clock",
+                        "description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
+                        "priority": 101,
+                        "features": [
+                            "creation"
+                        ],
+                        "properties": [
+                            {
+                                "key": "clockFormat",
+                                "name": "Display Format",
+                                "control": "composite",
+                                "items": [
+                                    {
+                                        "control": "select",
+                                        "options": [
+                                            {
+                                                "value": "YYYY/MM/DD hh:mm:ss",
+                                                "name": "YYYY/MM/DD hh:mm:ss"
+                                            },
+                                            {
+                                                "value": "YYYY/DDD hh:mm:ss",
+                                                "name": "YYYY/DDD hh:mm:ss"
+                                            },
+                                            {
+                                                "value": "hh:mm:ss",
+                                                "name": "hh:mm:ss"
+                                            }
+                                        ],
+                                        "cssClass": "l-inline"
+                                    },
+                                    {
+                                        "control": "select",
+                                        "options": [
+                                            {
+                                                "value": "clock12",
+                                                "name": "12hr"
+                                            },
+                                            {
+                                                "value": "clock24",
+                                                "name": "24hr"
+                                            }
+                                        ],
+                                        "cssClass": "l-inline"
+                                    }
+                                ]
+                            },
+                            {
+                                "key": "timezone",
+                                "name": "Timezone",
+                                "control": "autocomplete",
+                                "options": MomentTimezone.tz.names()
+                            }
+                        ],
+                        "model": {
+                            "clockFormat": [
+                                "YYYY/MM/DD hh:mm:ss",
+                                "clock12"
+                            ],
+                            "timezone": "UTC"
+                        }
+                    },
+                    {
+                        "key": "timer",
+                        "name": "Timer",
+                        "cssClass": "icon-timer",
+                        "description": "A timer that counts up or down to a datetime. Timers can be started, stopped and reset whenever needed, and support a variety of display formats. Each Timer displays the same value to all users. Timers can be added to Display Layouts.",
+                        "priority": 100,
+                        "features": [
+                            "creation"
+                        ],
+                        "properties": [
+                            {
+                                "key": "timestamp",
+                                "control": "datetime",
+                                "name": "Target"
+                            },
+                            {
+                                "key": "timerFormat",
+                                "control": "select",
+                                "name": "Display Format",
+                                "options": [
+                                    {
+                                        "value": "long",
+                                        "name": "DDD hh:mm:ss"
+                                    },
+                                    {
+                                        "value": "short",
+                                        "name": "hh:mm:ss"
+                                    }
+                                ]
+                            }
+                        ],
+                        "model": {
+                            "timerFormat": "DDD hh:mm:ss"
                         }
-                    ],
-                    "model": {
-                        "timerFormat": "DDD hh:mm:ss"
                     }
-                }
-            ],
-            "runs": [{
-                "implementation": FollowIndicator,
-                "depends": ["openmct", "timerService"]
-            }],
-            "licenses": [
-                {
-                    "name": "moment-duration-format",
-                    "version": "1.3.0",
-                    "author": "John Madhavan-Reese",
-                    "description": "Duration parsing/formatting",
-                    "website": "https://github.com/jsmreese/moment-duration-format",
-                    "copyright": "Copyright 2014 John Madhavan-Reese",
-                    "license": "license-mit",
-                    "link": "https://github.com/jsmreese/moment-duration-format/blob/master/LICENSE"
-                }
-            ]
+                ],
+                "runs": [{
+                    "implementation": FollowIndicator,
+                    "depends": ["openmct", "timerService"]
+                }],
+                "licenses": [
+                    {
+                        "name": "moment-duration-format",
+                        "version": "1.3.0",
+                        "author": "John Madhavan-Reese",
+                        "description": "Duration parsing/formatting",
+                        "website": "https://github.com/jsmreese/moment-duration-format",
+                        "copyright": "Copyright 2014 John Madhavan-Reese",
+                        "license": "license-mit",
+                        "link": "https://github.com/jsmreese/moment-duration-format/blob/master/LICENSE"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/hyperlink/bundle.js

@@ -22,98 +22,99 @@
 
 define([
     './src/HyperlinkController',
-    'legacyRegistry',
     './res/templates/hyperlink.html'
 ], function (
     HyperlinkController,
-    legacyRegistry,
     hyperlinkTemplate
 ) {
-    legacyRegistry.register("platform/features/hyperlink", {
-        "name": "Hyperlink",
-        "description": "Insert a hyperlink to reference a link",
-        "extensions": {
-            "types": [
-                {
-                    "key": "hyperlink",
-                    "name": "Hyperlink",
-                    "cssClass": "icon-chain-links",
-                    "description": "A hyperlink to redirect to a different link",
-                    "features": ["creation"],
-                    "properties": [
-                        {
-                            "key": "url",
-                            "name": "URL",
-                            "control": "textfield",
-                            "required": true,
-                            "cssClass": "l-input-lg"
-                        },
+    return {
+        name:"platform/features/hyperlink",
+        definition: {
+            "name": "Hyperlink",
+            "description": "Insert a hyperlink to reference a link",
+            "extensions": {
+                "types": [
+                    {
+                        "key": "hyperlink",
+                        "name": "Hyperlink",
+                        "cssClass": "icon-chain-links",
+                        "description": "A hyperlink to redirect to a different link",
+                        "features": ["creation"],
+                        "properties": [
+                            {
+                                "key": "url",
+                                "name": "URL",
+                                "control": "textfield",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            },
 
-                        {
-                            "key": "displayText",
-                            "name": "Text to Display",
-                            "control": "textfield",
-                            "required": true,
-                            "cssClass": "l-input-lg"
-                        },
-                        {
-                            "key": "displayFormat",
-                            "name": "Display Format",
-                            "control": "select",
-                            "options": [
-                                {
-                                    "name": "Link",
-                                    "value": "link"
-                                },
-                                {
-                                    "value": "button",
-                                    "name": "Button"
-                                }
-                            ],
-                            "cssClass": "l-inline"
-                        },
-                        {
-                            "key": "openNewTab",
-                            "name": "Tab to Open Hyperlink",
-                            "control": "select",
-                            "options": [
-                                {
-                                    "name": "Open in this tab",
-                                    "value": "thisTab"
-                                },
-                                {
-                                    "value": "newTab",
-                                    "name": "Open in a new tab"
-                                }
-                            ],
-                            "cssClass": "l-inline"
+                            {
+                                "key": "displayText",
+                                "name": "Text to Display",
+                                "control": "textfield",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            },
+                            {
+                                "key": "displayFormat",
+                                "name": "Display Format",
+                                "control": "select",
+                                "options": [
+                                    {
+                                        "name": "Link",
+                                        "value": "link"
+                                    },
+                                    {
+                                        "value": "button",
+                                        "name": "Button"
+                                    }
+                                ],
+                                "cssClass": "l-inline"
+                            },
+                            {
+                                "key": "openNewTab",
+                                "name": "Tab to Open Hyperlink",
+                                "control": "select",
+                                "options": [
+                                    {
+                                        "name": "Open in this tab",
+                                        "value": "thisTab"
+                                    },
+                                    {
+                                        "value": "newTab",
+                                        "name": "Open in a new tab"
+                                    }
+                                ],
+                                "cssClass": "l-inline"
 
+                            }
+                        ],
+                        "model": {
+                            "displayFormat": "link",
+                            "openNewTab": "thisTab",
+                            "removeTitle": true
                         }
-                    ],
-                    "model": {
-                        "displayFormat": "link",
-                        "openNewTab": "thisTab",
-                        "removeTitle": true
-                    }
 
-                }
-            ],
-            "views": [
-                {
-                    "key": "hyperlink",
-                    "type": "hyperlink",
-                    "name": "Hyperlink Display",
-                    "template": hyperlinkTemplate,
-                    "editable": false
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "HyperlinkController",
-                    "implementation": HyperlinkController,
-                    "depends": ["$scope"]
-                }
-            ]
+                    }
+                ],
+                "views": [
+                    {
+                        "key": "hyperlink",
+                        "type": "hyperlink",
+                        "name": "Hyperlink Display",
+                        "template": hyperlinkTemplate,
+                        "editable": false
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "HyperlinkController",
+                        "implementation": HyperlinkController,
+                        "depends": ["$scope"]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/imagery/bundle.js

@@ -24,62 +24,63 @@ define([
     "./src/policies/ImageryViewPolicy",
     "./src/controllers/ImageryController",
     "./src/directives/MCTBackgroundImage",
-    "./res/templates/imagery.html",
-    'legacyRegistry'
+    "./res/templates/imagery.html"
 ], function (
     ImageryViewPolicy,
     ImageryController,
     MCTBackgroundImage,
-    imageryTemplate,
-    legacyRegistry
+    imageryTemplate
 ) {
 
-    legacyRegistry.register("platform/features/imagery", {
-        "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"
-                    ]
-                }
-            ]
+    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/my-items/bundle.js

@@ -20,32 +20,30 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
-    'legacyRegistry'
-], function (
-    legacyRegistry
-) {
-
-    legacyRegistry.register("platform/features/my-items", {
-        "name": "My Items",
-        "description": "Defines a root named My Items",
-        "extensions": {
-            "roots": [
-                {
-                    "id": "mine"
-                }
-            ],
-            "models": [
-                {
-                    "id": "mine",
-                    "model": {
-                        "name": "My Items",
-                        "type": "folder",
-                        "composition": [],
-                        "location": "ROOT"
+define([], function () {
+    return {
+        name:"platform/features/my-items",
+        definition: {
+            "name": "My Items",
+            "description": "Defines a root named My Items",
+            "extensions": {
+                "roots": [
+                    {
+                        "id": "mine"
                     }
-                }
-            ]
+                ],
+                "models": [
+                    {
+                        "id": "mine",
+                        "model": {
+                            "name": "My Items",
+                            "type": "folder",
+                            "composition": [],
+                            "location": "ROOT"
+                        }
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/pages/bundle.js

@@ -22,55 +22,56 @@
 
 define([
     "./src/EmbeddedPageController",
-    "./res/iframe.html",
-    'legacyRegistry'
+    "./res/iframe.html"
 ], function (
     EmbeddedPageController,
-    iframeTemplate,
-    legacyRegistry
+    iframeTemplate
 ) {
 
-    legacyRegistry.register("platform/features/pages", {
-        "extensions": {
-            "types": [
-                {
-                    "key": "example.page",
-                    "name": "Web Page",
-                    "cssClass": "icon-page",
-                    "description": "Embed a web page or web-based image in a resizeable window component. Can be added to Display Layouts. Note that the URL being embedded must allow iframing.",
-                    "priority": 50,
-                    "features": [
-                        "creation"
-                    ],
-                    "properties": [
-                        {
-                            "key": "url",
-                            "name": "URL",
-                            "control": "textfield",
-                            "required": true,
-                            "cssClass": "l-input-lg"
-                        }
-                    ]
-                }
-            ],
-            "views": [
-                {
-                    "template": iframeTemplate,
-                    "name": "Page",
-                    "type": "example.page",
-                    "key": "example.page",
-                    "editable": false
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "EmbeddedPageController",
-                    "implementation": EmbeddedPageController,
-                    "depends": [
-                        "$sce"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/features/pages",
+        definition: {
+            "extensions": {
+                "types": [
+                    {
+                        "key": "example.page",
+                        "name": "Web Page",
+                        "cssClass": "icon-page",
+                        "description": "Embed a web page or web-based image in a resizeable window component. Can be added to Display Layouts. Note that the URL being embedded must allow iframing.",
+                        "priority": 50,
+                        "features": [
+                            "creation"
+                        ],
+                        "properties": [
+                            {
+                                "key": "url",
+                                "name": "URL",
+                                "control": "textfield",
+                                "required": true,
+                                "cssClass": "l-input-lg"
+                            }
+                        ]
+                    }
+                ],
+                "views": [
+                    {
+                        "template": iframeTemplate,
+                        "name": "Page",
+                        "type": "example.page",
+                        "key": "example.page",
+                        "editable": false
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "EmbeddedPageController",
+                        "implementation": EmbeddedPageController,
+                        "depends": [
+                            "$sce"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/pages/res/iframe.html

@@ -1,26 +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.
--->
-<div class="l-iframe abs">
-<iframe ng-controller="EmbeddedPageController as ctl"
-        ng-src="{{ctl.trust(model.url)}}">
-</iframe>
-</div>

platform/features/static-markup/bundle.js

@@ -22,35 +22,35 @@
 
 define([
 
-    "./res/markup.html",
-    'legacyRegistry'
+    "./res/markup.html"
 ], function (
-
-    markupTemplate,
-    legacyRegistry
+    markupTemplate
 ) {
 
-    legacyRegistry.register("platform/features/static-markup", {
-        "extensions": {
-            "types": [
-                {
-                    "key": "static.markup",
-                    "name": "Static Markup",
-                    "cssClass": "icon-pencil",
-                    "description": "Static markup sandbox",
-                    "features": [
-                        "creation"
-                    ]
-                }
-            ],
-            "views": [
-                {
-                    "template": markupTemplate,
-                    "name": "Static Markup",
-                    "type": "static.markup",
-                    "key": "static.markup"
-                }
-            ]
+    return {
+        name:"platform/features/static-markup",
+        definition: {
+            "extensions": {
+                "types": [
+                    {
+                        "key": "static.markup",
+                        "name": "Static Markup",
+                        "cssClass": "icon-pencil",
+                        "description": "Static markup sandbox",
+                        "features": [
+                            "creation"
+                        ]
+                    }
+                ],
+                "views": [
+                    {
+                        "template": markupTemplate,
+                        "name": "Static Markup",
+                        "type": "static.markup",
+                        "key": "static.markup"
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/features/timeline/bundle.js

@@ -21,31 +21,32 @@
  *****************************************************************************/
 
 define([
-    "./res/templates/deprecated-timeline-message.html",
-    'legacyRegistry'
+    "./res/templates/deprecated-timeline-message.html"
 ], function (
-    deprecatedTimelineMessage,
-    legacyRegistry
+    deprecatedTimelineMessage
 ) {
-    legacyRegistry.register('platform/features/timeline', {
-        extensions: {
-            types: [
-                {
-                    key: "timeline",
-                    name: "Timeline",
-                    description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
-                    priority: 502
-                }
-            ],
-            views: [
-                {
-                    key: "timeline",
-                    name: "Timeline",
-                    type: "timeline",
-                    description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
-                    template: deprecatedTimelineMessage
-                }
-            ]
+    return {
+        name: 'platform/features/timeline',
+        definition: {
+            extensions: {
+                types: [
+                    {
+                        key: "timeline",
+                        name: "Timeline",
+                        description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
+                        priority: 502
+                    }
+                ],
+                views: [
+                    {
+                        key: "timeline",
+                        name: "Timeline",
+                        type: "timeline",
+                        description: "Timeline, Activity and Activity Mode objects have been deprecated and will no longer be supported. (07/18/2018)",
+                        template: deprecatedTimelineMessage
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/forms/bundle.js

@@ -45,8 +45,7 @@ define([
     "./res/templates/controls/dialog.html",
     "./res/templates/controls/radio.html",
     "./res/templates/controls/file-input.html",
-    "./res/templates/controls/snap-view.html",
-    'legacyRegistry'
+    "./res/templates/controls/snap-view.html"
 ], function (
     MCTForm,
     MCTControl,
@@ -72,146 +71,148 @@ define([
     dialogTemplate,
     radioTemplate,
     fileInputTemplate,
-    snapViewTemplate,
-    legacyRegistry
+    snapViewTemplate
 ) {
 
-    legacyRegistry.register("platform/forms", {
-        "name": "MCT Forms",
-        "description": "Form generator; includes directive and some controls.",
-        "extensions": {
-            "directives": [
-                {
-                    "key": "mctForm",
-                    "implementation": MCTForm
-                },
-                {
-                    "key": "mctControl",
-                    "implementation": MCTControl,
-                    "depends": [
-                        "templateLinker",
-                        "controls[]"
-                    ]
-                },
-                {
-                    "key": "mctFileInput",
-                    "implementation": MCTFileInput,
-                    "depends": [
-                        "fileInputService"
-                    ]
-                }
-            ],
-            "controls": [
-                {
-                    "key": "autocomplete",
-                    "template": autocompleteTemplate
-                },
-                {
-                    "key": "checkbox",
-                    "template": checkboxTemplate
-                },
-                {
-                    "key": "radio",
-                    "template": radioTemplate
-                },
-                {
-                    "key": "datetime",
-                    "template": datetimeTemplate
-                },
-                {
-                    "key": "select",
-                    "template": selectTemplate
-                },
-                {
-                    "key": "textfield",
-                    "template": textfieldTemplate
-                },
-                {
-                    "key": "numberfield",
-                    "template": numberfieldTemplate
-                },
-                {
-                    "key": "textarea",
-                    "template": textareaTemplate
-                },
-                {
-                    "key": "button",
-                    "template": buttonTemplate
-                },
-                {
-                    "key": "color",
-                    "template": colorTemplate
-                },
-                {
-                    "key": "composite",
-                    "template": compositeTemplate
-                },
-                {
-                    "key": "menu-button",
-                    "template": menuButtonTemplate
-                },
-                {
-                    "key": "dialog-button",
-                    "template": dialogTemplate
-                },
-                {
-                    "key": "file-input",
-                    "template": fileInputTemplate
-                },
-                {
-                    "key": "snap-view",
-                    "template": snapViewTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "AutocompleteController",
-                    "implementation": AutocompleteController,
-                    "depends": [
-                        "$scope",
-                        "$element"
-                    ]
-                },
-                {
-                    "key": "DateTimeController",
-                    "implementation": DateTimeController,
-                    "depends": [
-                        "$scope"
-                    ]
-                },
-                {
-                    "key": "CompositeController",
-                    "implementation": CompositeController
-                },
-                {
-                    "key": "ColorController",
-                    "implementation": ColorController
-                },
-                {
-                    "key": "DialogButtonController",
-                    "implementation": DialogButtonController,
-                    "depends": [
-                        "$scope",
-                        "dialogService"
-                    ]
-                },
-                {
-                    "key": "SnapshotPreviewController",
-                    "implementation": SnapshotPreviewController,
-                    "depends": [
-                        "$scope",
-                        "openmct"
-                    ]
-                }
-            ],
-            "components": [
-                {
-                    "provides": "fileInputService",
-                    "type": "provider",
-                    "implementation": FileInputService
-                }
+    return {
+        name:"platform/forms",
+        definition: {
+            "name": "MCT Forms",
+            "description": "Form generator; includes directive and some controls.",
+            "extensions": {
+                "directives": [
+                    {
+                        "key": "mctForm",
+                        "implementation": MCTForm
+                    },
+                    {
+                        "key": "mctControl",
+                        "implementation": MCTControl,
+                        "depends": [
+                            "templateLinker",
+                            "controls[]"
+                        ]
+                    },
+                    {
+                        "key": "mctFileInput",
+                        "implementation": MCTFileInput,
+                        "depends": [
+                            "fileInputService"
+                        ]
+                    }
+                ],
+                "controls": [
+                    {
+                        "key": "autocomplete",
+                        "template": autocompleteTemplate
+                    },
+                    {
+                        "key": "checkbox",
+                        "template": checkboxTemplate
+                    },
+                    {
+                        "key": "radio",
+                        "template": radioTemplate
+                    },
+                    {
+                        "key": "datetime",
+                        "template": datetimeTemplate
+                    },
+                    {
+                        "key": "select",
+                        "template": selectTemplate
+                    },
+                    {
+                        "key": "textfield",
+                        "template": textfieldTemplate
+                    },
+                    {
+                        "key": "numberfield",
+                        "template": numberfieldTemplate
+                    },
+                    {
+                        "key": "textarea",
+                        "template": textareaTemplate
+                    },
+                    {
+                        "key": "button",
+                        "template": buttonTemplate
+                    },
+                    {
+                        "key": "color",
+                        "template": colorTemplate
+                    },
+                    {
+                        "key": "composite",
+                        "template": compositeTemplate
+                    },
+                    {
+                        "key": "menu-button",
+                        "template": menuButtonTemplate
+                    },
+                    {
+                        "key": "dialog-button",
+                        "template": dialogTemplate
+                    },
+                    {
+                        "key": "file-input",
+                        "template": fileInputTemplate
+                    },
+                    {
+                        "key": "snap-view",
+                        "template": snapViewTemplate
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "AutocompleteController",
+                        "implementation": AutocompleteController,
+                        "depends": [
+                            "$scope",
+                            "$element"
+                        ]
+                    },
+                    {
+                        "key": "DateTimeController",
+                        "implementation": DateTimeController,
+                        "depends": [
+                            "$scope"
+                        ]
+                    },
+                    {
+                        "key": "CompositeController",
+                        "implementation": CompositeController
+                    },
+                    {
+                        "key": "ColorController",
+                        "implementation": ColorController
+                    },
+                    {
+                        "key": "DialogButtonController",
+                        "implementation": DialogButtonController,
+                        "depends": [
+                            "$scope",
+                            "dialogService"
+                        ]
+                    },
+                    {
+                        "key": "SnapshotPreviewController",
+                        "implementation": SnapshotPreviewController,
+                        "depends": [
+                            "$scope",
+                            "openmct"
+                        ]
+                    }
+                ],
+                "components": [
+                    {
+                        "provides": "fileInputService",
+                        "type": "provider",
+                        "implementation": FileInputService
+                    }
 
-            ]
+                ]
+            }
         }
-    });
+    };
 });

platform/framework/bundle.js

@@ -20,91 +20,88 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+define([], function () {
 
-    'legacyRegistry'
-], function (
-
-    legacyRegistry
-) {
-
-    legacyRegistry.register("platform/framework", {
-        "name": "Open MCT Framework Component",
-        "description": "Framework layer for Open MCT; interprets bundle definitions and serves as an intermediary between Require and Angular",
-        "libraries": "lib",
-        "configuration": {
-            "paths": {
-                "angular": "angular.min"
+    return {
+        name:"platform/framework",
+        definition: {
+            "name": "Open MCT Framework Component",
+            "description": "Framework layer for Open MCT; interprets bundle definitions and serves as an intermediary between Require and Angular",
+            "libraries": "lib",
+            "configuration": {
+                "paths": {
+                    "angular": "angular.min"
+                },
+                "shim": {
+                    "angular": {
+                        "exports": "angular"
+                    }
+                }
             },
-            "shim": {
-                "angular": {
-                    "exports": "angular"
-                }
+            "extensions": {
+                "licenses": [
+                    {
+                        "name": "Blanket.js",
+                        "version": "1.1.5",
+                        "description": "Code coverage measurement and reporting",
+                        "author": "Alex Seville",
+                        "website": "http://blanketjs.org/",
+                        "copyright": "Copyright (c) 2013 Alex Seville",
+                        "license": "license-mit",
+                        "link": "http://opensource.org/licenses/MIT"
+                    },
+                    {
+                        "name": "Jasmine",
+                        "version": "1.3.1",
+                        "description": "Unit testing",
+                        "author": "Pivotal Labs",
+                        "website": "http://jasmine.github.io/",
+                        "copyright": "Copyright (c) 2008-2011 Pivotal Labs",
+                        "license": "license-mit",
+                        "link": "http://opensource.org/licenses/MIT"
+                    },
+                    {
+                        "name": "RequireJS",
+                        "version": "2.1.22",
+                        "description": "Script loader",
+                        "author": "The Dojo Foundation",
+                        "website": "http://requirejs.org/",
+                        "copyright": "Copyright (c) 2010-2015, The Dojo Foundation",
+                        "license": "license-mit",
+                        "link": "https://github.com/jrburke/requirejs/blob/master/LICENSE"
+                    },
+                    {
+                        "name": "AngularJS",
+                        "version": "1.4.4",
+                        "description": "Client-side web application framework",
+                        "author": "Google",
+                        "website": "http://angularjs.org/",
+                        "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
+                        "license": "license-mit",
+                        "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
+                    },
+                    {
+                        "name": "Angular-Route",
+                        "version": "1.4.4",
+                        "description": "Client-side view routing",
+                        "author": "Google",
+                        "website": "http://angularjs.org/",
+                        "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
+                        "license": "license-mit",
+                        "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
+                    },
+                    {
+                        "name": "ES6-Promise",
+                        "version": "3.0.2",
+                        "description": "Promise polyfill for pre-ECMAScript 6 browsers",
+                        "author": "Yehuda Katz, Tom Dale, Stefan Penner and contributors",
+                        "website": "https://github.com/jakearchibald/es6-promise",
+                        "copyright": "Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors",
+                        "license": "license-mit",
+                        "link": "https://github.com/jakearchibald/es6-promise/blob/master/LICENSE"
+                    }
+                ]
             }
-        },
-        "extensions": {
-            "licenses": [
-                {
-                    "name": "Blanket.js",
-                    "version": "1.1.5",
-                    "description": "Code coverage measurement and reporting",
-                    "author": "Alex Seville",
-                    "website": "http://blanketjs.org/",
-                    "copyright": "Copyright (c) 2013 Alex Seville",
-                    "license": "license-mit",
-                    "link": "http://opensource.org/licenses/MIT"
-                },
-                {
-                    "name": "Jasmine",
-                    "version": "1.3.1",
-                    "description": "Unit testing",
-                    "author": "Pivotal Labs",
-                    "website": "http://jasmine.github.io/",
-                    "copyright": "Copyright (c) 2008-2011 Pivotal Labs",
-                    "license": "license-mit",
-                    "link": "http://opensource.org/licenses/MIT"
-                },
-                {
-                    "name": "RequireJS",
-                    "version": "2.1.22",
-                    "description": "Script loader",
-                    "author": "The Dojo Foundation",
-                    "website": "http://requirejs.org/",
-                    "copyright": "Copyright (c) 2010-2015, The Dojo Foundation",
-                    "license": "license-mit",
-                    "link": "https://github.com/jrburke/requirejs/blob/master/LICENSE"
-                },
-                {
-                    "name": "AngularJS",
-                    "version": "1.4.4",
-                    "description": "Client-side web application framework",
-                    "author": "Google",
-                    "website": "http://angularjs.org/",
-                    "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
-                    "license": "license-mit",
-                    "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
-                },
-                {
-                    "name": "Angular-Route",
-                    "version": "1.4.4",
-                    "description": "Client-side view routing",
-                    "author": "Google",
-                    "website": "http://angularjs.org/",
-                    "copyright": "Copyright (c) 2010-2015 Google, Inc. http://angularjs.org",
-                    "license": "license-mit",
-                    "link": "https://github.com/angular/angular.js/blob/v1.4.4/LICENSE"
-                },
-                {
-                    "name": "ES6-Promise",
-                    "version": "3.0.2",
-                    "description": "Promise polyfill for pre-ECMAScript 6 browsers",
-                    "author": "Yehuda Katz, Tom Dale, Stefan Penner and contributors",
-                    "website": "https://github.com/jakearchibald/es6-promise",
-                    "copyright": "Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors",
-                    "license": "license-mit",
-                    "link": "https://github.com/jakearchibald/es6-promise/blob/master/LICENSE"
-                }
-            ]
         }
-    });
+    };
 });

platform/identity/bundle.js

@@ -24,63 +24,64 @@ define([
     "./src/IdentityAggregator",
     "./src/IdentityProvider",
     "./src/IdentityCreationDecorator",
-    "./src/IdentityIndicator",
-    'legacyRegistry'
+    "./src/IdentityIndicator"
 ], function (
     IdentityAggregator,
     IdentityProvider,
     IdentityCreationDecorator,
-    IdentityIndicator,
-    legacyRegistry
+    IdentityIndicator
 ) {
 
-    legacyRegistry.register("platform/identity", {
-        "extensions": {
-            "components": [
-                {
-                    "implementation": IdentityAggregator,
-                    "type": "aggregator",
-                    "provides": "identityService",
-                    "depends": [
-                        "$q"
-                    ]
-                },
-                {
-                    "implementation": IdentityProvider,
-                    "type": "provider",
-                    "provides": "identityService",
-                    "depends": [
-                        "$q"
-                    ],
-                    "priority": "fallback"
-                },
-                {
-                    "type": "decorator",
-                    "provides": "creationService",
-                    "implementation": IdentityCreationDecorator,
-                    "depends": [
-                        "identityService"
-                    ]
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": IdentityIndicator,
-                    "depends": [
-                        "identityService"
-                    ]
-                }
-            ],
-            "types": [
-                {
-                    "properties": [
-                        {
-                            "key": "creator",
-                            "name": "Creator"
-                        }
-                    ]
-                }
-            ]
+    return {
+        name:"platform/identity",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "implementation": IdentityAggregator,
+                        "type": "aggregator",
+                        "provides": "identityService",
+                        "depends": [
+                            "$q"
+                        ]
+                    },
+                    {
+                        "implementation": IdentityProvider,
+                        "type": "provider",
+                        "provides": "identityService",
+                        "depends": [
+                            "$q"
+                        ],
+                        "priority": "fallback"
+                    },
+                    {
+                        "type": "decorator",
+                        "provides": "creationService",
+                        "implementation": IdentityCreationDecorator,
+                        "depends": [
+                            "identityService"
+                        ]
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": IdentityIndicator,
+                        "depends": [
+                            "identityService"
+                        ]
+                    }
+                ],
+                "types": [
+                    {
+                        "properties": [
+                            {
+                                "key": "creator",
+                                "name": "Creator"
+                            }
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/persistence/aggregator/bundle.js

@@ -21,25 +21,26 @@
  *****************************************************************************/
 
 define([
-    "./src/PersistenceAggregator",
-    'legacyRegistry'
+    "./src/PersistenceAggregator"
 ], function (
-    PersistenceAggregator,
-    legacyRegistry
+    PersistenceAggregator
 ) {
 
-    legacyRegistry.register("platform/persistence/aggregator", {
-        "extensions": {
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "aggregator",
-                    "depends": [
-                        "$q"
-                    ],
-                    "implementation": PersistenceAggregator
-                }
-            ]
+    return {
+        name:"platform/persistence/aggregator",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "aggregator",
+                        "depends": [
+                            "$q"
+                        ],
+                        "implementation": PersistenceAggregator
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/persistence/couch/bundle.js

@@ -22,56 +22,57 @@
 
 define([
     "./src/CouchPersistenceProvider",
-    "./src/CouchIndicator",
-    'legacyRegistry'
+    "./src/CouchIndicator"
 ], function (
     CouchPersistenceProvider,
-    CouchIndicator,
-    legacyRegistry
+    CouchIndicator
 ) {
 
-    legacyRegistry.register("platform/persistence/couch", {
-        "name": "Couch Persistence",
-        "description": "Adapter to read and write objects using a CouchDB instance.",
-        "extensions": {
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "provider",
-                    "implementation": CouchPersistenceProvider,
-                    "depends": [
-                        "$http",
-                        "$q",
-                        "PERSISTENCE_SPACE",
-                        "COUCHDB_PATH"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_SPACE",
-                    "value": "mct"
-                },
-                {
-                    "key": "COUCHDB_PATH",
-                    "value": "/couch/openmct"
-                },
-                {
-                    "key": "COUCHDB_INDICATOR_INTERVAL",
-                    "value": 15000
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": CouchIndicator,
-                    "depends": [
-                        "$http",
-                        "$interval",
-                        "COUCHDB_PATH",
-                        "COUCHDB_INDICATOR_INTERVAL"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/persistence/couch",
+        definition: {
+            "name": "Couch Persistence",
+            "description": "Adapter to read and write objects using a CouchDB instance.",
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "provider",
+                        "implementation": CouchPersistenceProvider,
+                        "depends": [
+                            "$http",
+                            "$q",
+                            "PERSISTENCE_SPACE",
+                            "COUCHDB_PATH"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_SPACE",
+                        "value": "mct"
+                    },
+                    {
+                        "key": "COUCHDB_PATH",
+                        "value": "/couch/openmct"
+                    },
+                    {
+                        "key": "COUCHDB_INDICATOR_INTERVAL",
+                        "value": 15000
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": CouchIndicator,
+                        "depends": [
+                            "$http",
+                            "$interval",
+                            "COUCHDB_PATH",
+                            "COUCHDB_INDICATOR_INTERVAL"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/persistence/elastic/bundle.js

@@ -23,74 +23,75 @@
 define([
     "./src/ElasticPersistenceProvider",
     "./src/ElasticSearchProvider",
-    "./src/ElasticIndicator",
-    'legacyRegistry'
+    "./src/ElasticIndicator"
 ], function (
     ElasticPersistenceProvider,
     ElasticSearchProvider,
-    ElasticIndicator,
-    legacyRegistry
+    ElasticIndicator
 ) {
 
-    legacyRegistry.register("platform/persistence/elastic", {
-        "name": "ElasticSearch Persistence",
-        "description": "Adapter to read and write objects using an ElasticSearch instance.",
-        "extensions": {
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "provider",
-                    "implementation": ElasticPersistenceProvider,
-                    "depends": [
-                        "$http",
-                        "$q",
-                        "PERSISTENCE_SPACE",
-                        "ELASTIC_ROOT",
-                        "ELASTIC_PATH"
-                    ]
-                },
-                {
-                    "provides": "searchService",
-                    "type": "provider",
-                    "implementation": ElasticSearchProvider,
-                    "depends": [
-                        "$http",
-                        "ELASTIC_ROOT"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_SPACE",
-                    "value": "mct"
-                },
-                {
-                    "key": "ELASTIC_ROOT",
-                    "value": "http://localhost:9200",
-                    "priority": "fallback"
-                },
-                {
-                    "key": "ELASTIC_PATH",
-                    "value": "mct/domain_object",
-                    "priority": "fallback"
-                },
-                {
-                    "key": "ELASTIC_INDICATOR_INTERVAL",
-                    "value": 15000,
-                    "priority": "fallback"
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": ElasticIndicator,
-                    "depends": [
-                        "$http",
-                        "$interval",
-                        "ELASTIC_ROOT",
-                        "ELASTIC_INDICATOR_INTERVAL"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/persistence/elastic",
+        definition: {
+            "name": "ElasticSearch Persistence",
+            "description": "Adapter to read and write objects using an ElasticSearch instance.",
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "provider",
+                        "implementation": ElasticPersistenceProvider,
+                        "depends": [
+                            "$http",
+                            "$q",
+                            "PERSISTENCE_SPACE",
+                            "ELASTIC_ROOT",
+                            "ELASTIC_PATH"
+                        ]
+                    },
+                    {
+                        "provides": "searchService",
+                        "type": "provider",
+                        "implementation": ElasticSearchProvider,
+                        "depends": [
+                            "$http",
+                            "ELASTIC_ROOT"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_SPACE",
+                        "value": "mct"
+                    },
+                    {
+                        "key": "ELASTIC_ROOT",
+                        "value": "http://localhost:9200",
+                        "priority": "fallback"
+                    },
+                    {
+                        "key": "ELASTIC_PATH",
+                        "value": "mct/domain_object",
+                        "priority": "fallback"
+                    },
+                    {
+                        "key": "ELASTIC_INDICATOR_INTERVAL",
+                        "value": 15000,
+                        "priority": "fallback"
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": ElasticIndicator,
+                        "depends": [
+                            "$http",
+                            "$interval",
+                            "ELASTIC_ROOT",
+                            "ELASTIC_INDICATOR_INTERVAL"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/persistence/local/bundle.js

@@ -22,39 +22,40 @@
 
 define([
     "./src/LocalStoragePersistenceProvider",
-    "./src/LocalStorageIndicator",
-    'legacyRegistry'
+    "./src/LocalStorageIndicator"
 ], function (
     LocalStoragePersistenceProvider,
-    LocalStorageIndicator,
-    legacyRegistry
+    LocalStorageIndicator
 ) {
 
-    legacyRegistry.register("platform/persistence/local", {
-        "extensions": {
-            "components": [
-                {
-                    "provides": "persistenceService",
-                    "type": "provider",
-                    "implementation": LocalStoragePersistenceProvider,
-                    "depends": [
-                        "$window",
-                        "$q",
-                        "PERSISTENCE_SPACE"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_SPACE",
-                    "value": "mct"
-                }
-            ],
-            "indicators": [
-                {
-                    "implementation": LocalStorageIndicator
-                }
-            ]
+    return {
+        name:"platform/persistence/local",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "persistenceService",
+                        "type": "provider",
+                        "implementation": LocalStoragePersistenceProvider,
+                        "depends": [
+                            "$window",
+                            "$q",
+                            "PERSISTENCE_SPACE"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_SPACE",
+                        "value": "mct"
+                    }
+                ],
+                "indicators": [
+                    {
+                        "implementation": LocalStorageIndicator
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/persistence/queue/bundle.js

@@ -24,58 +24,59 @@ define([
     "./src/QueuingPersistenceCapabilityDecorator",
     "./src/PersistenceQueue",
     "./src/PersistenceFailureController",
-    "./res/templates/persistence-failure-dialog.html",
-    'legacyRegistry'
+    "./res/templates/persistence-failure-dialog.html"
 ], function (
     QueuingPersistenceCapabilityDecorator,
     PersistenceQueue,
     PersistenceFailureController,
-    persistenceFailureDialogTemplate,
-    legacyRegistry
+    persistenceFailureDialogTemplate
 ) {
 
-    legacyRegistry.register("platform/persistence/queue", {
-        "extensions": {
-            "components": [
-                {
-                    "type": "decorator",
-                    "provides": "capabilityService",
-                    "implementation": QueuingPersistenceCapabilityDecorator,
-                    "depends": [
-                        "persistenceQueue"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "persistenceQueue",
-                    "implementation": PersistenceQueue,
-                    "depends": [
-                        "$q",
-                        "$timeout",
-                        "dialogService",
-                        "PERSISTENCE_QUEUE_DELAY"
-                    ]
-                }
-            ],
-            "constants": [
-                {
-                    "key": "PERSISTENCE_QUEUE_DELAY",
-                    "value": 5
-                }
-            ],
-            "templates": [
-                {
-                    "key": "persistence-failure-dialog",
-                    "template": persistenceFailureDialogTemplate
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "PersistenceFailureController",
-                    "implementation": PersistenceFailureController
-                }
-            ]
+    return {
+        name:"platform/persistence/queue",
+        definition: {
+            "extensions": {
+                "components": [
+                    {
+                        "type": "decorator",
+                        "provides": "capabilityService",
+                        "implementation": QueuingPersistenceCapabilityDecorator,
+                        "depends": [
+                            "persistenceQueue"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "persistenceQueue",
+                        "implementation": PersistenceQueue,
+                        "depends": [
+                            "$q",
+                            "$timeout",
+                            "dialogService",
+                            "PERSISTENCE_QUEUE_DELAY"
+                        ]
+                    }
+                ],
+                "constants": [
+                    {
+                        "key": "PERSISTENCE_QUEUE_DELAY",
+                        "value": 5
+                    }
+                ],
+                "templates": [
+                    {
+                        "key": "persistence-failure-dialog",
+                        "template": persistenceFailureDialogTemplate
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "PersistenceFailureController",
+                        "implementation": PersistenceFailureController
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/policy/bundle.js

@@ -23,46 +23,47 @@
 define([
     "./src/PolicyActionDecorator",
     "./src/PolicyViewDecorator",
-    "./src/PolicyProvider",
-    'legacyRegistry'
+    "./src/PolicyProvider"
 ], function (
     PolicyActionDecorator,
     PolicyViewDecorator,
-    PolicyProvider,
-    legacyRegistry
+    PolicyProvider
 ) {
 
-    legacyRegistry.register("platform/policy", {
-        "name": "Policy Service",
-        "description": "Provides support for extension-driven decisions.",
-        "sources": "src",
-        "extensions": {
-            "components": [
-                {
-                    "type": "decorator",
-                    "provides": "actionService",
-                    "implementation": PolicyActionDecorator,
-                    "depends": [
-                        "policyService"
-                    ]
-                },
-                {
-                    "type": "decorator",
-                    "provides": "viewService",
-                    "implementation": PolicyViewDecorator,
-                    "depends": [
-                        "policyService"
-                    ]
-                },
-                {
-                    "type": "provider",
-                    "provides": "policyService",
-                    "implementation": PolicyProvider,
-                    "depends": [
-                        "policies[]"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/policy",
+        definition: {
+            "name": "Policy Service",
+            "description": "Provides support for extension-driven decisions.",
+            "sources": "src",
+            "extensions": {
+                "components": [
+                    {
+                        "type": "decorator",
+                        "provides": "actionService",
+                        "implementation": PolicyActionDecorator,
+                        "depends": [
+                            "policyService"
+                        ]
+                    },
+                    {
+                        "type": "decorator",
+                        "provides": "viewService",
+                        "implementation": PolicyViewDecorator,
+                        "depends": [
+                            "policyService"
+                        ]
+                    },
+                    {
+                        "type": "provider",
+                        "provides": "policyService",
+                        "implementation": PolicyProvider,
+                        "depends": [
+                            "policies[]"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/representation/bundle.js

@@ -29,8 +29,7 @@ define([
     "./src/gestures/GestureRepresenter",
     "./src/services/DndService",
     "./src/TemplateLinker",
-    "./src/TemplatePrefetcher",
-    'legacyRegistry'
+    "./src/TemplatePrefetcher"
 ], function (
     MCTInclude,
     MCTRepresentation,
@@ -40,104 +39,106 @@ define([
     GestureRepresenter,
     DndService,
     TemplateLinker,
-    TemplatePrefetcher,
-    legacyRegistry
+    TemplatePrefetcher
 ) {
 
-    legacyRegistry.register("platform/representation", {
-        "extensions": {
-            "directives": [
-                {
-                    "key": "mctInclude",
-                    "implementation": MCTInclude,
-                    "depends": [
-                        "templates[]",
-                        "templateLinker"
-                    ]
-                },
-                {
-                    "key": "mctRepresentation",
-                    "implementation": MCTRepresentation,
-                    "depends": [
-                        "representations[]",
-                        "views[]",
-                        "representers[]",
-                        "$q",
-                        "templateLinker",
-                        "$log"
-                    ]
-                }
-            ],
-            "gestures": [
-                {
-                    "key": "drag",
-                    "implementation": DragGesture,
-                    "depends": [
-                        "$log",
-                        "dndService"
-                    ]
-                },
-                {
-                    "key": "drop",
-                    "implementation": DropGesture,
-                    "depends": [
-                        "dndService",
-                        "$q"
-                    ]
-                }
-            ],
-            "components": [
-                {
-                    "provides": "gestureService",
-                    "type": "provider",
-                    "implementation": GestureProvider,
-                    "depends": [
-                        "gestures[]"
-                    ]
-                }
-            ],
-            "representers": [
-                {
-                    "implementation": GestureRepresenter,
-                    "depends": [
-                        "gestureService"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "dndService",
-                    "implementation": DndService,
-                    "depends": [
-                        "$log"
-                    ]
-                },
-                {
-                    "key": "templateLinker",
-                    "implementation": TemplateLinker,
-                    "depends": [
-                        "$templateRequest",
-                        "$sce",
-                        "$compile",
-                        "$log"
-                    ],
-                    "comment": "For internal use by mct-include and mct-representation."
-                }
-            ],
-            "runs": [
-                {
-                    "priority": "mandatory",
-                    "implementation": TemplatePrefetcher,
-                    "depends": [
-                        "templateLinker",
-                        "templates[]",
-                        "views[]",
-                        "representations[]",
-                        "controls[]",
-                        "containers[]"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/representation",
+        definition: {
+            "extensions": {
+                "directives": [
+                    {
+                        "key": "mctInclude",
+                        "implementation": MCTInclude,
+                        "depends": [
+                            "templates[]",
+                            "templateLinker"
+                        ]
+                    },
+                    {
+                        "key": "mctRepresentation",
+                        "implementation": MCTRepresentation,
+                        "depends": [
+                            "representations[]",
+                            "views[]",
+                            "representers[]",
+                            "$q",
+                            "templateLinker",
+                            "$log"
+                        ]
+                    }
+                ],
+                "gestures": [
+                    {
+                        "key": "drag",
+                        "implementation": DragGesture,
+                        "depends": [
+                            "$log",
+                            "dndService"
+                        ]
+                    },
+                    {
+                        "key": "drop",
+                        "implementation": DropGesture,
+                        "depends": [
+                            "dndService",
+                            "$q"
+                        ]
+                    }
+                ],
+                "components": [
+                    {
+                        "provides": "gestureService",
+                        "type": "provider",
+                        "implementation": GestureProvider,
+                        "depends": [
+                            "gestures[]"
+                        ]
+                    }
+                ],
+                "representers": [
+                    {
+                        "implementation": GestureRepresenter,
+                        "depends": [
+                            "gestureService"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "dndService",
+                        "implementation": DndService,
+                        "depends": [
+                            "$log"
+                        ]
+                    },
+                    {
+                        "key": "templateLinker",
+                        "implementation": TemplateLinker,
+                        "depends": [
+                            "$templateRequest",
+                            "$sce",
+                            "$compile",
+                            "$log"
+                        ],
+                        "comment": "For internal use by mct-include and mct-representation."
+                    }
+                ],
+                "runs": [
+                    {
+                        "priority": "mandatory",
+                        "implementation": TemplatePrefetcher,
+                        "depends": [
+                            "templateLinker",
+                            "templates[]",
+                            "views[]",
+                            "representations[]",
+                            "controls[]",
+                            "containers[]"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/search/bundle.js

@@ -29,8 +29,7 @@ define([
     "./res/templates/search.html",
     "./res/templates/search-menu.html",
     "raw-loader!./src/services/GenericSearchWorker.js",
-    "raw-loader!./src/services/BareBonesSearchWorker.js",
-    'legacyRegistry'
+    "raw-loader!./src/services/BareBonesSearchWorker.js"
 ], function (
     SearchController,
     SearchMenuController,
@@ -40,98 +39,100 @@ define([
     searchTemplate,
     searchMenuTemplate,
     searchWorkerText,
-    BareBonesSearchWorkerText,
-    legacyRegistry
+    BareBonesSearchWorkerText
 ) {
 
-    legacyRegistry.register("platform/search", {
-        "name": "Search",
-        "description": "Allows the user to search through the file tree.",
-        "extensions": {
-            "constants": [
-                {
-                    "key": "GENERIC_SEARCH_ROOTS",
-                    "value": [
-                        "ROOT"
-                    ],
-                    "priority": "fallback"
-                },
-                {
-                    "key": "USE_LEGACY_INDEXER",
-                    "value": false,
-                    "priority": 2
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "SearchController",
-                    "implementation": SearchController,
-                    "depends": [
-                        "$scope",
-                        "searchService"
-                    ]
-                },
-                {
-                    "key": "SearchMenuController",
-                    "implementation": SearchMenuController,
-                    "depends": [
-                        "$scope",
-                        "types[]"
-                    ]
-                }
-            ],
-            "representations": [
-                {
-                    "key": "search-item",
-                    "template": searchItemTemplate
-                }
-            ],
-            "templates": [
-                {
-                    "key": "search",
-                    "template": searchTemplate
-                },
-                {
-                    "key": "search-menu",
-                    "template": searchMenuTemplate
-                }
-            ],
-            "components": [
-                {
-                    "provides": "searchService",
-                    "type": "provider",
-                    "implementation": GenericSearchProvider,
-                    "depends": [
-                        "$q",
-                        "$log",
-                        "modelService",
-                        "workerService",
-                        "topic",
-                        "GENERIC_SEARCH_ROOTS",
-                        "USE_LEGACY_INDEXER",
-                        "openmct"
-                    ]
-                },
-                {
-                    "provides": "searchService",
-                    "type": "aggregator",
-                    "implementation": SearchAggregator,
-                    "depends": [
-                        "$q",
-                        "objectService"
-                    ]
-                }
-            ],
-            "workers": [
-                {
-                    "key": "bareBonesSearchWorker",
-                    "scriptText": BareBonesSearchWorkerText
-                },
-                {
-                    "key": "genericSearchWorker",
-                    "scriptText": searchWorkerText
-                }
-            ]
+    return {
+        name:"platform/search",
+        definition: {
+            "name": "Search",
+            "description": "Allows the user to search through the file tree.",
+            "extensions": {
+                "constants": [
+                    {
+                        "key": "GENERIC_SEARCH_ROOTS",
+                        "value": [
+                            "ROOT"
+                        ],
+                        "priority": "fallback"
+                    },
+                    {
+                        "key": "USE_LEGACY_INDEXER",
+                        "value": false,
+                        "priority": 2
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "SearchController",
+                        "implementation": SearchController,
+                        "depends": [
+                            "$scope",
+                            "searchService"
+                        ]
+                    },
+                    {
+                        "key": "SearchMenuController",
+                        "implementation": SearchMenuController,
+                        "depends": [
+                            "$scope",
+                            "types[]"
+                        ]
+                    }
+                ],
+                "representations": [
+                    {
+                        "key": "search-item",
+                        "template": searchItemTemplate
+                    }
+                ],
+                "templates": [
+                    {
+                        "key": "search",
+                        "template": searchTemplate
+                    },
+                    {
+                        "key": "search-menu",
+                        "template": searchMenuTemplate
+                    }
+                ],
+                "components": [
+                    {
+                        "provides": "searchService",
+                        "type": "provider",
+                        "implementation": GenericSearchProvider,
+                        "depends": [
+                            "$q",
+                            "$log",
+                            "modelService",
+                            "workerService",
+                            "topic",
+                            "GENERIC_SEARCH_ROOTS",
+                            "USE_LEGACY_INDEXER",
+                            "openmct"
+                        ]
+                    },
+                    {
+                        "provides": "searchService",
+                        "type": "aggregator",
+                        "implementation": SearchAggregator,
+                        "depends": [
+                            "$q",
+                            "objectService"
+                        ]
+                    }
+                ],
+                "workers": [
+                    {
+                        "key": "bareBonesSearchWorker",
+                        "scriptText": BareBonesSearchWorkerText
+                    },
+                    {
+                        "key": "genericSearchWorker",
+                        "scriptText": searchWorkerText
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/status/bundle.js

@@ -23,40 +23,41 @@
 define([
     "./src/StatusRepresenter",
     "./src/StatusCapability",
-    "./src/StatusService",
-    'legacyRegistry'
+    "./src/StatusService"
 ], function (
     StatusRepresenter,
     StatusCapability,
-    StatusService,
-    legacyRegistry
+    StatusService
 ) {
 
-    legacyRegistry.register("platform/status", {
-        "extensions": {
-            "representers": [
-                {
-                    "implementation": StatusRepresenter
-                }
-            ],
-            "capabilities": [
-                {
-                    "key": "status",
-                    "implementation": StatusCapability,
-                    "depends": [
-                        "statusService"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "statusService",
-                    "implementation": StatusService,
-                    "depends": [
-                        "topic"
-                    ]
-                }
-            ]
+    return {
+        name:"platform/status",
+        definition: {
+            "extensions": {
+                "representers": [
+                    {
+                        "implementation": StatusRepresenter
+                    }
+                ],
+                "capabilities": [
+                    {
+                        "key": "status",
+                        "implementation": StatusCapability,
+                        "depends": [
+                            "statusService"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "statusService",
+                        "implementation": StatusService,
+                        "depends": [
+                            "topic"
+                        ]
+                    }
+                ]
+            }
         }
-    });
+    };
 });

platform/telemetry/bundle.js

@@ -26,104 +26,105 @@ define([
     "./src/TelemetryCapability",
     "./src/TelemetryFormatter",
     "./src/TelemetrySubscriber",
-    "./src/TelemetryHandler",
-    'legacyRegistry'
+    "./src/TelemetryHandler"
 ], function (
     TelemetryAggregator,
     TelemetryController,
     TelemetryCapability,
     TelemetryFormatter,
     TelemetrySubscriber,
-    TelemetryHandler,
-    legacyRegistry
+    TelemetryHandler
 ) {
 
-    legacyRegistry.register("platform/telemetry", {
-        "name": "Data bundle",
-        "description": "Interfaces and infrastructure for real-time and historical data",
-        "configuration": {
-            "paths": {
-                "moment": "moment.min"
+    return {
+        name:"platform/telemetry",
+        definition: {
+            "name": "Data bundle",
+            "description": "Interfaces and infrastructure for real-time and historical data",
+            "configuration": {
+                "paths": {
+                    "moment": "moment.min"
+                },
+                "shim": {
+                    "moment": {
+                        "exports": "moment"
+                    }
+                }
             },
-            "shim": {
-                "moment": {
-                    "exports": "moment"
-                }
+            "extensions": {
+                "components": [
+                    {
+                        "provides": "telemetryService",
+                        "type": "aggregator",
+                        "implementation": TelemetryAggregator,
+                        "depends": [
+                            "$q"
+                        ]
+                    }
+                ],
+                "controllers": [
+                    {
+                        "key": "TelemetryController",
+                        "implementation": TelemetryController,
+                        "depends": [
+                            "$scope",
+                            "$q",
+                            "$timeout",
+                            "$log"
+                        ]
+                    }
+                ],
+                "capabilities": [
+                    {
+                        "key": "telemetry",
+                        "implementation": TelemetryCapability,
+                        "depends": [
+                            "openmct",
+                            "$injector",
+                            "$q",
+                            "$log"
+                        ]
+                    }
+                ],
+                "services": [
+                    {
+                        "key": "telemetryFormatter",
+                        "implementation": TelemetryFormatter,
+                        "depends": [
+                            "formatService",
+                            "DEFAULT_TIME_FORMAT"
+                        ]
+                    },
+                    {
+                        "key": "telemetrySubscriber",
+                        "implementation": TelemetrySubscriber,
+                        "depends": [
+                            "$q",
+                            "$timeout"
+                        ]
+                    },
+                    {
+                        "key": "telemetryHandler",
+                        "implementation": TelemetryHandler,
+                        "depends": [
+                            "$q",
+                            "telemetrySubscriber"
+                        ]
+                    }
+                ],
+                "licenses": [
+                    {
+                        "name": "Moment.js",
+                        "version": "2.11.1",
+                        "author": "Tim Wood, Iskren Chernev, Moment.js contributors",
+                        "description": "Time/date parsing/formatting",
+                        "website": "http://momentjs.com",
+                        "copyright": "Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors",
+                        "license": "license-mit",
+                        "link": "https://raw.githubusercontent.com/moment/moment/develop/LICENSE"
+                    }
+                ]
             }
-        },
-        "extensions": {
-            "components": [
-                {
-                    "provides": "telemetryService",
-                    "type": "aggregator",
-                    "implementation": TelemetryAggregator,
-                    "depends": [
-                        "$q"
-                    ]
-                }
-            ],
-            "controllers": [
-                {
-                    "key": "TelemetryController",
-                    "implementation": TelemetryController,
-                    "depends": [
-                        "$scope",
-                        "$q",
-                        "$timeout",
-                        "$log"
-                    ]
-                }
-            ],
-            "capabilities": [
-                {
-                    "key": "telemetry",
-                    "implementation": TelemetryCapability,
-                    "depends": [
-                        "openmct",
-                        "$injector",
-                        "$q",
-                        "$log"
-                    ]
-                }
-            ],
-            "services": [
-                {
-                    "key": "telemetryFormatter",
-                    "implementation": TelemetryFormatter,
-                    "depends": [
-                        "formatService",
-                        "DEFAULT_TIME_FORMAT"
-                    ]
-                },
-                {
-                    "key": "telemetrySubscriber",
-                    "implementation": TelemetrySubscriber,
-                    "depends": [
-                        "$q",
-                        "$timeout"
-                    ]
-                },
-                {
-                    "key": "telemetryHandler",
-                    "implementation": TelemetryHandler,
-                    "depends": [
-                        "$q",
-                        "telemetrySubscriber"
-                    ]
-                }
-            ],
-            "licenses": [
-                {
-                    "name": "Moment.js",
-                    "version": "2.11.1",
-                    "author": "Tim Wood, Iskren Chernev, Moment.js contributors",
-                    "description": "Time/date parsing/formatting",
-                    "website": "http://momentjs.com",
-                    "copyright": "Copyright (c) 2011-2014 Tim Wood, Iskren Chernev, Moment.js contributors",
-                    "license": "license-mit",
-                    "link": "https://raw.githubusercontent.com/moment/moment/develop/LICENSE"
-                }
-            ]
         }
-    });
+    };
 });

src/MCT.js

@@ -22,9 +22,9 @@
 
 define([
     'EventEmitter',
-    'legacyRegistry',
     'uuid',
-    './defaultRegistry',
+    './BundleRegistry',
+    './installDefaultBundles',
     './api/api',
     './api/overlays/OverlayAPI',
     './selection/Selection',
@@ -50,9 +50,9 @@ define([
     'vue'
 ], function (
     EventEmitter,
-    legacyRegistry,
     uuid,
-    defaultRegistry,
+    BundleRegistry,
+    installDefaultBundles,
     api,
     OverlayAPI,
     Selection,
@@ -248,7 +248,8 @@ define([
 
         this.branding = BrandingAPI.default;
 
-        this.legacyRegistry = defaultRegistry;
+        this.legacyRegistry = new BundleRegistry();
+        installDefaultBundles(this.legacyRegistry);
 
         // Plugin's that are installed by default
 
@@ -258,11 +259,12 @@ define([
         this.install(LegacyIndicatorsPlugin());
         this.install(LicensesPlugin.default());
         this.install(RemoveActionPlugin.default());
-        this.install(this.plugins.ImportExport());
         this.install(this.plugins.FolderView());
         this.install(this.plugins.Tabs());
         this.install(this.plugins.FlexibleLayout());
         this.install(this.plugins.GoToOriginalAction());
+        this.install(this.plugins.ImportExport());
+        this.install(this.plugins.WebPage());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);
@@ -361,8 +363,8 @@ define([
             this.legacyExtension('types', legacyDefinition);
         }.bind(this));
 
-        legacyRegistry.register('adapter', this.legacyBundle);
-        legacyRegistry.enable('adapter');
+        this.legacyRegistry.register('adapter', this.legacyBundle);
+        this.legacyRegistry.enable('adapter');
 
         this.router.route(/^\/$/, () => {
             this.router.setPath('/browse/');

src/adapter/bundle.js

@@ -21,7 +21,6 @@
  *****************************************************************************/
 
 define([
-    'legacyRegistry',
     './actions/ActionDialogDecorator',
     './capabilities/AdapterCapability',
     './directives/MCTView',
@@ -39,7 +38,6 @@ define([
     './policies/LegacyCompositionPolicyAdapter',
     './actions/LegacyActionAdapter'
 ], function (
-    legacyRegistry,
     ActionDialogDecorator,
     AdapterCapability,
     MCTView,
@@ -57,161 +55,164 @@ define([
     legacyCompositionPolicyAdapter,
     LegacyActionAdapter
 ) {
-    legacyRegistry.register('src/adapter', {
-        "extensions": {
-            "directives": [
-                {
-                    key: "mctView",
-                    implementation: MCTView,
-                    depends: ["openmct"]
-                }
-            ],
-            capabilities: [
-                {
-                    key: "adapter",
-                    implementation: AdapterCapability
-                }
-            ],
-            services: [
-                {
-                    key: "instantiate",
-                    priority: "mandatory",
-                    implementation: Instantiate,
-                    depends: [
-                        "capabilityService",
-                        "identifierService",
-                        "cacheService"
-                    ]
-                }
-            ],
-            components: [
-                {
-                    type: "decorator",
-                    provides: "capabilityService",
-                    implementation: APICapabilityDecorator,
-                    depends: [
-                        "$injector"
-                    ]
-                },
-                {
-                    type: "decorator",
-                    provides: "actionService",
-                    implementation: ActionDialogDecorator,
-                    depends: ["openmct"]
-                },
-                {
-                    type: "decorator",
-                    provides: "modelService",
-                    implementation: MissingModelCompatibilityDecorator,
-                    depends: ["openmct"]
-                },
-                {
-                    provides: "objectService",
-                    type: "decorator",
-                    priority: "mandatory",
-                    implementation: LegacyObjectAPIInterceptor,
-                    depends: [
-                        "openmct",
-                        "roots[]",
-                        "instantiate",
-                        "topic"
-                    ]
-                }
-            ],
-            policies: [
-                {
-                    category: "view",
-                    implementation: AdaptedViewPolicy,
-                    depends: ["openmct"]
-                }
-            ],
-            runs: [
-                {
-                    implementation: TypeDeprecationChecker,
-                    depends: ["types[]"]
-                },
-                {
-                    implementation: AlternateCompositionInitializer,
-                    depends: ["openmct"]
-                },
-                {
-                    implementation: function (openmct, $location, $rootScope) {
-                        return new TimeSettingsURLHandler(
-                            openmct.time,
-                            $location,
-                            $rootScope
-                        );
+    return {
+        name: 'src/adapter',
+        definition: {
+            "extensions": {
+                "directives": [
+                    {
+                        key: "mctView",
+                        implementation: MCTView,
+                        depends: ["openmct"]
+                    }
+                ],
+                capabilities: [
+                    {
+                        key: "adapter",
+                        implementation: AdapterCapability
+                    }
+                ],
+                services: [
+                    {
+                        key: "instantiate",
+                        priority: "mandatory",
+                        implementation: Instantiate,
+                        depends: [
+                            "capabilityService",
+                            "identifierService",
+                            "cacheService"
+                        ]
+                    }
+                ],
+                components: [
+                    {
+                        type: "decorator",
+                        provides: "capabilityService",
+                        implementation: APICapabilityDecorator,
+                        depends: [
+                            "$injector"
+                        ]
                     },
-                    depends: ["openmct", "$location", "$rootScope"]
-                },
-                {
-                    implementation: LegacyTelemetryProvider,
-                    depends: [
-                        "openmct",
-                        "instantiate"
-                    ]
-                },
-                {
-                    implementation: installLegacyViews,
-                    depends: [
-                        "openmct",
-                        "views[]",
-                        "instantiate"
-                    ]
-                },
-                {
-                    implementation: RegisterLegacyTypes,
-                    depends: [
-                        "types[]",
-                        "openmct"
-                    ]
-                },
-                {
-                    implementation: legacyCompositionPolicyAdapter.default,
-                    depends: [
-                        "openmct"
-                    ]
-                },
-                {
-                    implementation: LegacyActionAdapter.default,
-                    depends: [
-                        "openmct",
-                        "actions[]"
-                    ]
-                }
-            ],
-            licenses: [
-                {
-                    "name": "almond",
-                    "version": "0.3.3",
-                    "description": "Lightweight RequireJS replacement for builds",
-                    "author": "jQuery Foundation",
-                    "website": "https://github.com/requirejs/almond",
-                    "copyright": "Copyright jQuery Foundation and other contributors, https://jquery.org/",
-                    "license": "license-mit",
-                    "link": "https://github.com/requirejs/almond/blob/master/LICENSE"
-                },
-                {
-                    "name": "lodash",
-                    "version": "3.10.1",
-                    "description": "Utility functions",
-                    "author": "Dojo Foundation",
-                    "website": "https://lodash.com",
-                    "copyright": "Copyright 2012-2015 The Dojo Foundation",
-                    "license": "license-mit",
-                    "link": "https://raw.githubusercontent.com/lodash/lodash/3.10.1/LICENSE"
-                },
-                {
-                    "name": "EventEmitter3",
-                    "version": "1.2.0",
-                    "description": "Event-driven programming support",
-                    "author": "Arnout Kazemier",
-                    "website": "https://github.com/primus/eventemitter3",
-                    "copyright": "Copyright (c) 2014 Arnout Kazemier",
-                    "license": "license-mit",
-                    "link": "https://github.com/primus/eventemitter3/blob/1.2.0/LICENSE"
-                }
-            ]
+                    {
+                        type: "decorator",
+                        provides: "actionService",
+                        implementation: ActionDialogDecorator,
+                        depends: ["openmct"]
+                    },
+                    {
+                        type: "decorator",
+                        provides: "modelService",
+                        implementation: MissingModelCompatibilityDecorator,
+                        depends: ["openmct"]
+                    },
+                    {
+                        provides: "objectService",
+                        type: "decorator",
+                        priority: "mandatory",
+                        implementation: LegacyObjectAPIInterceptor,
+                        depends: [
+                            "openmct",
+                            "roots[]",
+                            "instantiate",
+                            "topic"
+                        ]
+                    }
+                ],
+                policies: [
+                    {
+                        category: "view",
+                        implementation: AdaptedViewPolicy,
+                        depends: ["openmct"]
+                    }
+                ],
+                runs: [
+                    {
+                        implementation: TypeDeprecationChecker,
+                        depends: ["types[]"]
+                    },
+                    {
+                        implementation: AlternateCompositionInitializer,
+                        depends: ["openmct"]
+                    },
+                    {
+                        implementation: function (openmct, $location, $rootScope) {
+                            return new TimeSettingsURLHandler(
+                                openmct.time,
+                                $location,
+                                $rootScope
+                            );
+                        },
+                        depends: ["openmct", "$location", "$rootScope"]
+                    },
+                    {
+                        implementation: LegacyTelemetryProvider,
+                        depends: [
+                            "openmct",
+                            "instantiate"
+                        ]
+                    },
+                    {
+                        implementation: installLegacyViews,
+                        depends: [
+                            "openmct",
+                            "views[]",
+                            "instantiate"
+                        ]
+                    },
+                    {
+                        implementation: RegisterLegacyTypes,
+                        depends: [
+                            "types[]",
+                            "openmct"
+                        ]
+                    },
+                    {
+                        implementation: legacyCompositionPolicyAdapter.default,
+                        depends: [
+                            "openmct"
+                        ]
+                    },
+                    {
+                        implementation: LegacyActionAdapter.default,
+                        depends: [
+                            "openmct",
+                            "actions[]"
+                        ]
+                    }
+                ],
+                licenses: [
+                    {
+                        "name": "almond",
+                        "version": "0.3.3",
+                        "description": "Lightweight RequireJS replacement for builds",
+                        "author": "jQuery Foundation",
+                        "website": "https://github.com/requirejs/almond",
+                        "copyright": "Copyright jQuery Foundation and other contributors, https://jquery.org/",
+                        "license": "license-mit",
+                        "link": "https://github.com/requirejs/almond/blob/master/LICENSE"
+                    },
+                    {
+                        "name": "lodash",
+                        "version": "3.10.1",
+                        "description": "Utility functions",
+                        "author": "Dojo Foundation",
+                        "website": "https://lodash.com",
+                        "copyright": "Copyright 2012-2015 The Dojo Foundation",
+                        "license": "license-mit",
+                        "link": "https://raw.githubusercontent.com/lodash/lodash/3.10.1/LICENSE"
+                    },
+                    {
+                        "name": "EventEmitter3",
+                        "version": "1.2.0",
+                        "description": "Event-driven programming support",
+                        "author": "Arnout Kazemier",
+                        "website": "https://github.com/primus/eventemitter3",
+                        "copyright": "Copyright (c) 2014 Arnout Kazemier",
+                        "license": "license-mit",
+                        "link": "https://github.com/primus/eventemitter3/blob/1.2.0/LICENSE"
+                    }
+                ]
+            }
         }
-    });
+    }
 });

src/api/contextMenu/ContextMenu.vue

@@ -1,20 +1,24 @@
 <template>
-    <div class="c-menu">
-        <ul>
-            <li v-for="action in actions"
-                :key="action.name"
-                :class="action.cssClass"
-                :title="action.description"
-                @click="action.invoke(objectPath)">
-                {{ action.name }}
-            </li>
-            <li v-if="actions.length === 0">No actions defined.</li>
-        </ul>
-    </div>
+<div class="c-menu">
+    <ul>
+        <li
+            v-for="action in actions"
+            :key="action.name"
+            :class="action.cssClass"
+            :title="action.description"
+            @click="action.invoke(objectPath)"
+        >
+            {{ action.name }}
+        </li>
+        <li v-if="actions.length === 0">
+            No actions defined.
+        </li>
+    </ul>
+</div>
 </template>
 
 <script>
-    export default {
-        inject: ['actions', 'objectPath']
-    }
-</script>
+export default {
+    inject: ['actions', 'objectPath']
+}
+</script>

src/api/overlays/components/DialogComponent.vue

@@ -1,28 +1,36 @@
 <template>
-    <div class="c-message">
-        <!--Uses flex-row -->
-        <div class="c-message__icon"
-             :class="['u-icon-bg-color-' + iconClass]"></div>
-        <div class="c-message__text">
-            <!-- Uses flex-column -->
-            <div class="c-message__title"
-                 v-if="title">
-                {{title}}
-            </div>
-
-            <div class="c-message__hint"
-                 v-if="hint">
-                {{hint}}
-                <span v-if="timestamp">[{{timestamp}}]</span>
-            </div>
-
-            <div class="c-message__action-text"
-                 v-if="message">
-                {{message}}
-            </div>
-            <slot></slot>
+<div class="c-message">
+    <!--Uses flex-row -->
+    <div
+        class="c-message__icon"
+        :class="['u-icon-bg-color-' + iconClass]"
+    ></div>
+    <div class="c-message__text">
+        <!-- Uses flex-column -->
+        <div
+            v-if="title"
+            class="c-message__title"
+        >
+            {{ title }}
         </div>
+
+        <div
+            v-if="hint"
+            class="c-message__hint"
+        >
+            {{ hint }}
+            <span v-if="timestamp">[{{ timestamp }}]</span>
+        </div>
+
+        <div
+            v-if="message"
+            class="c-message__action-text"
+        >
+            {{ message }}
+        </div>
+        <slot></slot>
     </div>
+</div>
 </template>
 
 <style lang="scss">

src/api/overlays/components/OverlayComponent.vue

@@ -1,28 +1,57 @@
 <template>
-    <div class="c-overlay">
-        <div class="c-overlay__blocker"
-            @click="destroy">
-        </div>
-        <div class="c-overlay__outer">
-            <button class="c-click-icon c-overlay__close-button icon-x-in-circle"
-                v-if="dismissable"
-                @click="destroy">
+<div class="c-overlay">
+    <div
+        class="c-overlay__blocker"
+        @click="destroy"
+    ></div>
+    <div class="c-overlay__outer">
+        <button
+            v-if="dismissable"
+            class="c-click-icon c-overlay__close-button icon-x-in-circle"
+            @click="destroy"
+        ></button>
+        <div
+            ref="element"
+            class="c-overlay__contents"
+        ></div>
+        <div
+            v-if="buttons"
+            class="c-overlay__button-bar"
+        >
+            <button
+                v-for="(button, index) in buttons"
+                :key="index"
+                class="c-button"
+                :class="{'c-button--major': button.emphasis}"
+                @click="buttonClickHandler(button.callback)"
+            >
+                {{ button.label }}
             </button>
-            <div class="c-overlay__contents" ref="element" tabindex="0"></div>
-            <div class="c-overlay__button-bar" v-if="buttons">
-                <button class="c-button"
-                        tabindex="0"
-                        ref="buttons"
-                        v-for="(button, index) in buttons"
-                        :key="index"
-                        @focus="focusIndex=index"
-                        :class="{'c-button--major': focusIndex===index}"
-                        @click="buttonClickHandler(button.callback)">
-                    {{button.label}}
+            <div
+                ref="element"
+                class="c-overlay__contents"
+                tabindex="0"
+            ></div>
+            <div
+                v-if="buttons"
+                class="c-overlay__button-bar"
+            >
+                <button
+                    v-for="(button, index) in buttons"
+                    ref="buttons"
+                    :key="index"
+                    class="c-button"
+                    tabindex="0"
+                    :class="{'c-button--major': focusIndex===index}"
+                    @focus="focusIndex=index"
+                    @click="buttonClickHandler(button.callback)"
+                >
+                    {{ button.label }}
                 </button>
             </div>
         </div>
     </div>
+</div>
 </template>
 
 <style lang="scss">
@@ -138,7 +167,7 @@
                 box-shadow: rgba(black, 0.5) 0 2px 25px;
             }
         }
-        
+
         .l-overlay-fullscreen {
             // Used by About > Licenses display
             .c-overlay__outer {
@@ -174,50 +203,50 @@
 </style>
 
 <script>
-    export default {
-        data: function () {
-            return {
-                focusIndex: -1
-            };
-        },
-        inject: ['dismiss', 'element', 'buttons', 'dismissable'],
-        mounted() {
-            const element = this.$refs.element;
-            element.appendChild(this.element);
-            const elementForFocus = this.getElementForFocus() || element;
-            this.$nextTick(() => {
-                elementForFocus.focus();
-            });
-        },
-        methods: {
-            destroy: function () {
-                if (this.dismissable) {
-                    this.dismiss();
-                }
-            },
-            buttonClickHandler: function (method) {
-                method();
-                this.$emit('destroy');
-            },
-            getElementForFocus: function () {
-                const defaultElement = this.$refs.element;;
-                if (!this.$refs.buttons) {
-                    return defaultElement;
-                }
-
-                const focusButton = this.$refs.buttons.filter((button, index) => {
-                    if (this.buttons[index].emphasis) {
-                        this.focusIndex = index;
-                    }
-                    return this.buttons[index].emphasis;
-                });
-
-                if (!focusButton.length) {
-                    return defaultElement;
-                }
-
-                return focusButton[0];
+export default {
+    data: function () {
+        return {
+            focusIndex: -1
+        };
+    },
+    inject: ['dismiss', 'element', 'buttons', 'dismissable'],
+    mounted() {
+        const element = this.$refs.element;
+        element.appendChild(this.element);
+        const elementForFocus = this.getElementForFocus() || element;
+        this.$nextTick(() => {
+            elementForFocus.focus();
+        });
+    },
+    methods: {
+        destroy: function () {
+            if (this.dismissable) {
+                this.dismiss();
             }
+        },
+        buttonClickHandler: function (method) {
+            method();
+            this.$emit('destroy');
+        },
+        getElementForFocus: function () {
+            const defaultElement = this.$refs.element;
+            if (!this.$refs.buttons) {
+                return defaultElement;
+            }
+
+            const focusButton = this.$refs.buttons.filter((button, index) => {
+                if (this.buttons[index].emphasis) {
+                    this.focusIndex = index;
+                }
+                return this.buttons[index].emphasis;
+            });
+
+            if (!focusButton.length) {
+                return defaultElement;
+            }
+
+            return focusButton[0];
         }
     }
+}
 </script>

src/api/overlays/components/ProgressDialogComponent.vue

@@ -1,7 +1,7 @@
 <template>
-    <dialog-component>
-        <progress-component :model="model"></progress-component>
-    </dialog-component>
+<dialog-component>
+    <progress-component :model="model" />
+</dialog-component>
 </template>
 
 <style lang="scss">
@@ -14,9 +14,14 @@ import DialogComponent from './DialogComponent.vue';
 export default {
     components: {
         DialogComponent: DialogComponent,
-        ProgressComponent: ProgressComponent,
+        ProgressComponent: ProgressComponent
     },
     inject:['iconClass', 'title', 'hint', 'timestamp', 'message'],
-    props:['model']
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    }
 }
 </script>

src/installDefaultBundles.js

@@ -19,12 +19,41 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+const DEFAULTS = [
+    'src/adapter',
+    'platform/framework',
+    'platform/core',
+    'platform/representation',
+    'platform/commonUI/about',
+    'platform/commonUI/browse',
+    'platform/commonUI/edit',
+    'platform/commonUI/dialog',
+    'platform/commonUI/formats',
+    'platform/commonUI/general',
+    'platform/commonUI/inspect',
+    'platform/commonUI/mobile',
+    'platform/commonUI/notification',
+    'platform/containment',
+    'platform/execution',
+    'platform/exporters',
+    'platform/telemetry',
+    'platform/features/clock',
+    'platform/features/imagery',
+    'platform/features/hyperlink',
+    'platform/features/timeline',
+    'platform/forms',
+    'platform/identity',
+    'platform/persistence/aggregator',
+    'platform/persistence/queue',
+    'platform/policy',
+    'platform/entanglement',
+    'platform/search',
+    'platform/status',
+    'platform/commonUI/regions'
+];
 
 define([
-    'legacyRegistry',
-
     '../src/adapter/bundle',
-
     '../example/eventGenerator/bundle',
     '../example/export/bundle',
     '../example/forms/bundle',
@@ -37,7 +66,6 @@ define([
     '../example/profiling/bundle',
     '../example/scratchpad/bundle',
     '../example/styleguide/bundle',
-
     '../platform/commonUI/about/bundle',
     '../platform/commonUI/browse/bundle',
     '../platform/commonUI/dialog/bundle',
@@ -56,7 +84,6 @@ define([
     '../platform/features/clock/bundle',
     '../platform/features/imagery/bundle',
     '../platform/features/my-items/bundle',
-    '../platform/features/pages/bundle',
     '../platform/features/hyperlink/bundle',
     '../platform/features/static-markup/bundle',
     '../platform/features/timeline/bundle',
@@ -74,45 +101,23 @@ define([
     '../platform/search/bundle',
     '../platform/status/bundle',
     '../platform/telemetry/bundle'
-], function (legacyRegistry) {
+], function () {
+    const LEGACY_BUNDLES = Array.from(arguments);
 
-    var DEFAULTS = [
-        'src/adapter',
-        'platform/framework',
-        'platform/core',
-        'platform/representation',
-        'platform/commonUI/about',
-        'platform/commonUI/browse',
-        'platform/commonUI/edit',
-        'platform/commonUI/dialog',
-        'platform/commonUI/formats',
-        'platform/commonUI/general',
-        'platform/commonUI/inspect',
-        'platform/commonUI/mobile',
-        'platform/commonUI/notification',
-        'platform/containment',
-        'platform/execution',
-        'platform/exporters',
-        'platform/telemetry',
-        'platform/features/clock',
-        'platform/features/imagery',
-        'platform/features/pages',
-        'platform/features/hyperlink',
-        'platform/features/timeline',
-        'platform/forms',
-        'platform/identity',
-        'platform/persistence/aggregator',
-        'platform/persistence/queue',
-        'platform/policy',
-        'platform/entanglement',
-        'platform/search',
-        'platform/status',
-        'platform/commonUI/regions'
-    ];
+    return function installDefaultBundles(bundleRegistry) {
+        registerLegacyBundles(LEGACY_BUNDLES);
+        enableDefaultBundles();
 
-    DEFAULTS.forEach(function (bundlePath) {
-        legacyRegistry.enable(bundlePath);
-    });
+        function registerLegacyBundles(bundles) {
+            bundles.forEach((bundle, i) => {
+                bundleRegistry.register(bundle.name, bundle.definition);
+            });
+        }
 
-    return legacyRegistry;
+        function enableDefaultBundles() {
+            DEFAULTS.forEach(function (bundlePath) {
+                bundleRegistry.enable(bundlePath);
+            });
+        }
+    };
 });

src/plugins/LADTable/LADTableSetViewProvider.js

@@ -44,6 +44,7 @@ define([
                 return {
                     show: function (element) {
                         component =  new Vue({
+                            el: element,
                             components: {
                                 LadTableSet: LadTableSet.default
                             },
@@ -52,7 +53,6 @@ define([
                                 domainObject,
                                 objectPath
                             },
-                            el: element,
                             template: '<lad-table-set></lad-table-set>'
                         });
                     },

src/plugins/LADTable/LADTableViewProvider.js

@@ -44,6 +44,7 @@ define([
                 return {
                     show: function (element) {
                         component =  new Vue({
+                            el: element,
                             components: {
                                 LadTableComponent: LadTableComponent.default
                             },
@@ -52,7 +53,6 @@ define([
                                 domainObject,
                                 objectPath
                             },
-                            el: element,
                             template: '<lad-table-component></lad-table-component>'
                         });
                     },

src/plugins/LADTable/components/LADRow.vue

@@ -22,13 +22,13 @@
  *****************************************************************************/
 
 <template>
-    <tr @contextmenu.prevent="showContextMenu">
-        <td>{{name}}</td>
-        <td>{{timestamp}}</td>
-        <td :class="valueClass">
-            {{value}}
-        </td>
-    </tr>
+<tr @contextmenu.prevent="showContextMenu">
+    <td>{{ name }}</td>
+    <td>{{ timestamp }}</td>
+    <td :class="valueClass">
+        {{ value }}
+    </td>
+</tr>
 </template>
 
 <style lang="scss">
@@ -44,7 +44,12 @@ const CONTEXT_MENU_ACTIONS = [
 
 export default {
     inject: ['openmct', 'objectPath'],
-    props: ['domainObject'],
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        }
+    },
     data() {
         let currentObjectPath = this.objectPath.slice();
         currentObjectPath.unshift(this.domainObject);
@@ -57,48 +62,16 @@ export default {
             currentObjectPath
         }
     },
-    methods: {
-        updateValues(datum) {
-            this.timestamp = this.formats[this.timestampKey].format(datum);
-            this.value = this.formats[this.valueKey].format(datum);
-
-            var limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
-
-            if (limit) {
-                this.valueClass = limit.cssClass;
-            } else {
-                this.valueClass = '';
-            }
-        },
-        updateName(name){
-            this.name = name;
-        },
-        updateTimeSystem(timeSystem) {
-            this.value = '---';
-            this.timestamp = '---';
-            this.valueClass = '';
-            this.timestampKey = timeSystem.key;
-
-            this.openmct
-                .telemetry
-                .request(this.domainObject, {strategy: 'latest'})
-                .then((array) => this.updateValues(array[array.length - 1]));
-
-        },
-        showContextMenu(event) {
-           this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
-        }
-    },
     mounted() {
         this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
         this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
-        this.limitEvaluator = openmct
+        this.limitEvaluator = this.openmct
             .telemetry
             .limitEvaluator(this.domainObject);
 
-        this.stopWatchingMutation = openmct
+        this.stopWatchingMutation = this.openmct
             .objects
             .observe(
                 this.domainObject,
@@ -129,6 +102,38 @@ export default {
         this.stopWatchingMutation();
         this.unsubscribe();
         this.openmct.off('timeSystem', this.updateTimeSystem);
+    },
+    methods: {
+        updateValues(datum) {
+            this.timestamp = this.formats[this.timestampKey].format(datum);
+            this.value = this.formats[this.valueKey].format(datum);
+
+            var limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
+
+            if (limit) {
+                this.valueClass = limit.cssClass;
+            } else {
+                this.valueClass = '';
+            }
+        },
+        updateName(name) {
+            this.name = name;
+        },
+        updateTimeSystem(timeSystem) {
+            this.value = '---';
+            this.timestamp = '---';
+            this.valueClass = '';
+            this.timestampKey = timeSystem.key;
+
+            this.openmct
+                .telemetry
+                .request(this.domainObject, {strategy: 'latest'})
+                .then((array) => this.updateValues(array[array.length - 1]));
+
+        },
+        showContextMenu(event) {
+            this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+        }
     }
 }
 </script>

src/plugins/LADTable/components/LADTable.vue

@@ -30,17 +30,16 @@
         </tr>
     </thead>
     <tbody>
-        <lad-row 
+        <lad-row
             v-for="item in items"
             :key="item.key"
-            :domainObject="item.domainObject">
-        </lad-row>
+            :domain-object="item.domainObject"
+        />
     </tbody>
 </table>
 </template>
 
 <script>
-import lodash from 'lodash';
 import LadRow from './LADRow.vue';
 
 export default {
@@ -53,6 +52,18 @@ export default {
             items: []
         }
     },
+    mounted() {
+        this.composition = this.openmct.composition.get(this.domainObject);
+        this.composition.on('add', this.addItem);
+        this.composition.on('remove', this.removeItem);
+        this.composition.on('reorder', this.reorder);
+        this.composition.load();
+    },
+    destroyed() {
+        this.composition.off('add', this.addItem);
+        this.composition.off('remove', this.removeItem);
+        this.composition.off('reorder', this.reorder);
+    },
     methods: {
         addItem(domainObject) {
             let item = {};
@@ -72,18 +83,6 @@ export default {
                 this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
             });
         }
-    },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addItem);
-        this.composition.on('remove', this.removeItem);
-        this.composition.on('reorder', this.reorder);
-        this.composition.load();
-    },
-    destroyed() {
-        this.composition.off('add', this.addItem);
-        this.composition.off('remove', this.removeItem);
-        this.composition.off('reorder', this.reorder);
     }
 }
 </script>

src/plugins/LADTable/components/LadTableSet.vue

@@ -21,29 +21,34 @@
  *****************************************************************************/
 
 <template>
-    <table class="c-table c-lad-table">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Timestamp</th>
-                <th>Value</th>
+<table class="c-table c-lad-table">
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Timestamp</th>
+            <th>Value</th>
+        </tr>
+    </thead>
+    <tbody>
+        <template
+            v-for="primary in primaryTelemetryObjects"
+        >
+            <tr
+                :key="primary.key"
+                class="c-table__group-header"
+            >
+                <td colspan="10">
+                    {{ primary.domainObject.name }}
+                </td>
             </tr>
-        </thead>
-        <tbody>
-            <template
-                v-for="primary in primaryTelemetryObjects">
-                <tr class="c-table__group-header"
-                    :key="primary.key">
-                    <td colspan="10">{{primary.domainObject.name}}</td>
-                </tr>
-                <lad-row
-                    v-for="secondary in secondaryTelemetryObjects[primary.key]"
-                    :key="secondary.key"
-                    :domainObject="secondary.domainObject">
-                </lad-row>
-            </template>
-        </tbody>
-    </table>
+            <lad-row
+                v-for="secondary in secondaryTelemetryObjects[primary.key]"
+                :key="secondary.key"
+                :domain-object="secondary.domainObject"
+            />
+        </template>
+    </tbody>
+</table>
 </template>
 
 <style lang="scss">
@@ -51,10 +56,9 @@
 </style>
 
 <script>
-    import lodash from 'lodash';
-    import LadRow from './LADRow.vue';
+import LadRow from './LADRow.vue';
 
-    export default {
+export default {
     inject: ['openmct', 'domainObject'],
     components: {
         LadRow
@@ -66,6 +70,22 @@
             compositions: []
         }
     },
+    mounted() {
+        this.composition = this.openmct.composition.get(this.domainObject);
+        this.composition.on('add', this.addPrimary);
+        this.composition.on('remove', this.removePrimary);
+        this.composition.on('reorder', this.reorderPrimary);
+        this.composition.load();
+    },
+    destroyed() {
+        this.composition.off('add', this.addPrimary);
+        this.composition.off('remove', this.removePrimary);
+        this.composition.off('reorder', this.reorderPrimary);
+        this.compositions.forEach(c => {
+            c.composition.off('add', c.addCallback);
+            c.composition.off('remove', c.removeCallback);
+        });
+    },
     methods: {
         addPrimary(domainObject) {
             let primary = {};
@@ -75,7 +95,7 @@
             this.$set(this.secondaryTelemetryObjects, primary.key, []);
             this.primaryTelemetryObjects.push(primary);
 
-            let composition = openmct.composition.get(primary.domainObject),
+            let composition = this.openmct.composition.get(primary.domainObject),
                 addCallback = this.addSecondary(primary),
                 removeCallback = this.removeSecondary(primary);
 
@@ -88,7 +108,7 @@
         removePrimary(identifier) {
             let index = _.findIndex(this.primaryTelemetryObjects, (primary) => this.openmct.objects.makeKeyString(identifier) === primary.key),
                 primary = this.primaryTelemetryObjects[index];
-            
+
             this.$set(this.secondaryTelemetryObjects, primary.key, undefined);
             this.primaryTelemetryObjects.splice(index,1);
             primary = undefined;
@@ -107,7 +127,7 @@
 
                 let array = this.secondaryTelemetryObjects[primary.key];
                 array.push(secondary);
-    
+
                 this.$set(this.secondaryTelemetryObjects, primary.key, array);
             }
         },
@@ -121,23 +141,6 @@
                 this.$set(this.secondaryTelemetryObjects, primary.key, array);
             }
         }
-    },
-    mounted() {
-        this.composition = this.openmct.composition.get(this.domainObject);
-        this.composition.on('add', this.addPrimary);
-        this.composition.on('remove', this.removePrimary);
-        this.composition.on('reorder', this.reorderPrimary);
-        this.composition.load();
-    },
-    destroyed() {
-        this.composition.off('add', this.addPrimary);
-        this.composition.off('remove', this.removePrimary);
-        this.composition.off('reorder', this.reorderPrimary);
-        this.compositions.forEach(c => {
-            c.composition.off('add', c.addCallback);
-            c.composition.off('remove', c.removeCallback);
-        });
     }
 }
 </script>
-  

src/plugins/clearData/components/globalClearIndicator.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="c-indicator c-indicator--clickable icon-clear-data s-status-caution">
-        <span class="label c-indicator__label">
-            <button @click="globalClearEmit">Clear Data</button>
-        </span>
-    </div>
+<div class="c-indicator c-indicator--clickable icon-clear-data s-status-caution">
+    <span class="label c-indicator__label">
+        <button @click="globalClearEmit">Clear Data</button>
+    </span>
+</div>
 </template>
 
 <script>

src/plugins/displayLayout/AlphanumericFormatViewProvider.js

@@ -55,11 +55,11 @@ define([
                                 openmct,
                                 objectPath
                             },
+                            el: element,
                             components: {
                                 AlphanumericFormatView: AlphanumericFormatView.default
                             },
-                            template: '<alphanumeric-format-view></alphanumeric-format-view>',
-                            el: element
+                            template: '<alphanumeric-format-view></alphanumeric-format-view>'
                         });
                     },
                     destroy: function () {

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -21,70 +21,78 @@
  *****************************************************************************/
 
 <template>
-    <div class="c-properties" v-if="isEditing">
-        <div class="c-properties__header">Alphanumeric Format</div>
-        <ul class="c-properties__section">
-            <li class="c-properties__row">
-                <div class="c-properties__label" title="Printf formatting for the selected telemetry">
-                    <label for="telemetryPrintfFormat">Format</label>
-                </div>
-                <div class="c-properties__value">
-                    <input id="telemetryPrintfFormat"
-                        type="text"
-                        @change="formatTelemetry"
-                        :value="telemetryFormat"
-                        :placeholder="nonMixedFormat ? '' : 'Mixed'"
-                    >
-                </div>
-            </li>
-        </ul>
+<div
+    v-if="isEditing"
+    class="c-properties"
+>
+    <div class="c-properties__header">
+        Alphanumeric Format
     </div>
+    <ul class="c-properties__section">
+        <li class="c-properties__row">
+            <div
+                class="c-properties__label"
+                title="Printf formatting for the selected telemetry"
+            >
+                <label for="telemetryPrintfFormat">Format</label>
+            </div>
+            <div class="c-properties__value">
+                <input
+                    id="telemetryPrintfFormat"
+                    type="text"
+                    :value="telemetryFormat"
+                    :placeholder="nonMixedFormat ? '' : 'Mixed'"
+                    @change="formatTelemetry"
+                >
+            </div>
+        </li>
+    </ul>
+</div>
 </template>
 
 <script>
-    export default {
-        inject: ['openmct'],
-        data() {
-            let selectionPath = this.openmct.selection.get()[0];
-            return {
-                isEditing: this.openmct.editor.isEditing(),
-                telemetryFormat: undefined,
-                nonMixedFormat: false
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            isEditing: this.openmct.editor.isEditing(),
+            telemetryFormat: undefined,
+            nonMixedFormat: false
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.toggleEdit);
+        this.openmct.selection.on('change', this.handleSelection);
+        this.handleSelection(this.openmct.selection.get());
+    },
+    destroyed() {
+        this.openmct.editor.off('isEditing', this.toggleEdit);
+        this.openmct.selection.off('change', this.handleSelection);
+    },
+    methods: {
+        toggleEdit(isEditing) {
+            this.isEditing = isEditing;
+        },
+        formatTelemetry(event) {
+            let newFormat = event.currentTarget.value;
+            this.openmct.selection.get().forEach(selectionPath => {
+                selectionPath[0].context.updateTelemetryFormat(newFormat);
+            });
+            this.telemetryFormat = newFormat;
+        },
+        handleSelection(selection) {
+            if (selection.length === 0 || selection[0].length < 2) {
+                return;
             }
-        },
-        methods: {
-            toggleEdit(isEditing) {
-                this.isEditing = isEditing;
-            },
-            formatTelemetry(event) {
-                let newFormat = event.currentTarget.value;
-                this.openmct.selection.get().forEach(selectionPath => {
-                    selectionPath[0].context.updateTelemetryFormat(newFormat);    
-                });
-                this.telemetryFormat = newFormat;
-            },
-            handleSelection(selection) {
-                if (selection.length === 0 || selection[0].length < 2) {
-                    return;
-                }
 
-                let format = selection[0][0].context.layoutItem.format;
-                this.nonMixedFormat = selection.every(selectionPath => {
-                    return selectionPath[0].context.layoutItem.format === format;
-                });
+            let format = selection[0][0].context.layoutItem.format;
+            this.nonMixedFormat = selection.every(selectionPath => {
+                return selectionPath[0].context.layoutItem.format === format;
+            });
 
-                this.telemetryFormat = this.nonMixedFormat ? format : '';
-            }
-        },
-        mounted() {
-            this.openmct.editor.on('isEditing', this.toggleEdit);
-            this.openmct.selection.on('change', this.handleSelection);
-            this.handleSelection(this.openmct.selection.get());
-        },
-        destroyed() {
-            this.openmct.editor.off('isEditing', this.toggleEdit);
-            this.openmct.selection.off('change', this.handleSelection);
+            this.telemetryFormat = this.nonMixedFormat ? format : '';
         }
     }
+}
 
-</script>
+</script>

src/plugins/displayLayout/components/BoxView.vue

@@ -21,15 +21,18 @@
  *****************************************************************************/
 
 <template>
-    <layout-frame :item="item"
-                  :grid-size="gridSize"
-                  @move="(gridDelta) => $emit('move', gridDelta)"
-                  @endMove="() => $emit('endMove')">
-        <div class="c-box-view"
-             :style="style">
-        </div>
-    </layout-frame>
- </template>
+<layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    @move="(gridDelta) => $emit('move', gridDelta)"
+    @endMove="() => $emit('endMove')"
+>
+    <div
+        class="c-box-view"
+        :style="style"
+    ></div>
+</layout-frame>
+</template>
 
 <style lang="scss">
     @import '~styles/sass-base';
@@ -44,60 +47,70 @@
     }
 </style>
 
- <script>
-    import LayoutFrame from './LayoutFrame.vue'
+<script>
+import LayoutFrame from './LayoutFrame.vue'
 
-    export default {
-        makeDefinition() {
+export default {
+    makeDefinition() {
+        return {
+            fill: '#717171',
+            stroke: 'transparent',
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 5
+        };
+    },
+    inject: ['openmct'],
+    components: {
+        LayoutFrame
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        index: {
+            type: Number,
+            required: true
+        },
+        initSelect: Boolean
+    },
+    computed: {
+        style() {
             return {
-                fill: '#717171',
-                stroke: 'transparent',
-                x: 1,
-                y: 1,
-                width: 10, 
-                height: 5
+                backgroundColor: this.item.fill,
+                border: '1px solid ' + this.item.stroke
             };
-        },
-        inject: ['openmct'],
-        components: {
-            LayoutFrame
-        },
-        props: {
-            item: Object,
-            gridSize: Array,
-            index: Number,
-            initSelect: Boolean
-        },
-        computed: {
-            style() {
-                return {
-                    backgroundColor: this.item.fill,
-                    border: '1px solid ' + this.item.stroke
-                };
+        }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
             }
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
 
-                this.context.index = newIndex;
-            }
-        },
-        mounted() {
-            this.context = {
-                layoutItem: this.item,
-                index: this.index
-            };
-            this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, this.context, this.initSelect);
-        },
-        destroyed() {
-            if (this.removeSelectable) {
-                this.removeSelectable();
-            }
+            this.context.index = newIndex;
+        }
+    },
+    mounted() {
+        this.context = {
+            layoutItem: this.item,
+            index: this.index
+        };
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
+    },
+    destroyed() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
         }
     }
- </script>
- 
+}
+</script>

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -21,42 +21,49 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout"
-         @dragover="handleDragOver"
-         @click.capture="bypassSelection"
-         @drop="handleDrop"
-         :class="{
-            'is-multi-selected': selectedLayoutItems.length > 1
-            }">
-        <!-- Background grid -->
-        <div class="l-layout__grid-holder c-grid">
-            <div class="c-grid__x l-grid l-grid-x"
-                 v-if="gridSize[0] >= 3"
-                 :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
-            </div>
-            <div class="c-grid__y l-grid l-grid-y"
-                 v-if="gridSize[1] >= 3"
-                 :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
-        </div>
-        <component v-for="(item, index) in layoutItems"
-                   :is="item.type"
-                   :item="item"
-                   :key="item.id"
-                   :gridSize="gridSize"
-                   :initSelect="initSelectIndex === index"
-                   :index="index"
-                   :multiSelect="selectedLayoutItems.length > 1"
-                   @move="move"
-                   @endMove="endMove"
-                   @endLineResize='endLineResize'
-                   @formatChanged='updateTelemetryFormat'>
-        </component>
-        <edit-marquee v-if='showMarquee'
-                      :gridSize="gridSize"
-                      :selectedLayoutItems="selectedLayoutItems"
-                      @endResize="endResize">
-        </edit-marquee>
+<div
+    class="l-layout"
+    :class="{
+        'is-multi-selected': selectedLayoutItems.length > 1
+    }"
+    @dragover="handleDragOver"
+    @click.capture="bypassSelection"
+    @drop="handleDrop"
+>
+    <!-- Background grid -->
+    <div class="l-layout__grid-holder c-grid">
+        <div
+            v-if="gridSize[0] >= 3"
+            class="c-grid__x l-grid l-grid-x"
+            :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
+        ></div>
+        <div
+            v-if="gridSize[1] >= 3"
+            class="c-grid__y l-grid l-grid-y"
+            :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
+        ></div>
     </div>
+    <component
+        :is="item.type"
+        v-for="(item, index) in layoutItems"
+        :key="item.id"
+        :item="item"
+        :grid-size="gridSize"
+        :init-select="initSelectIndex === index"
+        :index="index"
+        :multi-select="selectedLayoutItems.length > 1"
+        @move="move"
+        @endMove="endMove"
+        @endLineResize="endLineResize"
+        @formatChanged="updateTelemetryFormat"
+    />
+    <edit-marquee
+        v-if="showMarquee"
+        :grid-size="gridSize"
+        :selected-layout-items="selectedLayoutItems"
+        @endResize="endResize"
+    />
+</div>
 </template>
 
 <style lang="scss">
@@ -135,452 +142,455 @@
 </style>
 
 <script>
-    import uuid from 'uuid';
+import uuid from 'uuid';
 
-    import SubobjectView from './SubobjectView.vue'
-    import TelemetryView from './TelemetryView.vue'
-    import BoxView from './BoxView.vue'
-    import TextView from './TextView.vue'
-    import LineView from './LineView.vue'
-    import ImageView from './ImageView.vue'
-    import EditMarquee from './EditMarquee.vue'
+import SubobjectView from './SubobjectView.vue'
+import TelemetryView from './TelemetryView.vue'
+import BoxView from './BoxView.vue'
+import TextView from './TextView.vue'
+import LineView from './LineView.vue'
+import ImageView from './ImageView.vue'
+import EditMarquee from './EditMarquee.vue'
 
-    const ITEM_TYPE_VIEW_MAP = {
-        'subobject-view': SubobjectView,
-        'telemetry-view': TelemetryView,
-        'box-view': BoxView,
-        'line-view': LineView,
-        'text-view': TextView,
-        'image-view': ImageView
-    };
-    const ORDERS = {
-        top: Number.POSITIVE_INFINITY,
-        up: 1,
-        down: -1,
-        bottom: Number.NEGATIVE_INFINITY
-    };
-    const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
+const ITEM_TYPE_VIEW_MAP = {
+    'subobject-view': SubobjectView,
+    'telemetry-view': TelemetryView,
+    'box-view': BoxView,
+    'line-view': LineView,
+    'text-view': TextView,
+    'image-view': ImageView
+};
+const ORDERS = {
+    top: Number.POSITIVE_INFINITY,
+    up: 1,
+    down: -1,
+    bottom: Number.NEGATIVE_INFINITY
+};
+const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
 
-    let components = ITEM_TYPE_VIEW_MAP;
-    components['edit-marquee'] = EditMarquee;
+let components = ITEM_TYPE_VIEW_MAP;
+components['edit-marquee'] = EditMarquee;
 
-    function getItemDefinition(itemType, ...options) {
-        let itemView = ITEM_TYPE_VIEW_MAP[itemType];
+function getItemDefinition(itemType, ...options) {
+    let itemView = ITEM_TYPE_VIEW_MAP[itemType];
 
-        if (!itemView) {
-            throw `Invalid itemType: ${itemType}`;
-        }
-
-        return itemView.makeDefinition(...options);
+    if (!itemView) {
+        throw `Invalid itemType: ${itemType}`;
     }
 
-    export default {
-        data() {
-            let domainObject = JSON.parse(JSON.stringify(this.domainObject));
-            return {
-                internalDomainObject: domainObject,
-                initSelectIndex: undefined,
-                selection: []
-            };
+    return itemView.makeDefinition(...options);
+}
+
+export default {
+    components: components,
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        let domainObject = JSON.parse(JSON.stringify(this.domainObject));
+        return {
+            internalDomainObject: domainObject,
+            initSelectIndex: undefined,
+            selection: []
+        };
+    },
+    computed: {
+        gridSize() {
+            return this.internalDomainObject.configuration.layoutGrid;
         },
-        computed: {
-            gridSize() {
-                return this.internalDomainObject.configuration.layoutGrid;
-            },
-            layoutItems() {
-                return this.internalDomainObject.configuration.items;
-            },
-            selectedLayoutItems() {
-                return this.layoutItems.filter(item => {
-                    return this.itemIsInCurrentSelection(item);
-                });
-            },
-            showMarquee() {
-                let selectionPath = this.selection[0];
-                let singleSelectedLine = this.selection.length === 1 &&
+        layoutItems() {
+            return this.internalDomainObject.configuration.items;
+        },
+        selectedLayoutItems() {
+            return this.layoutItems.filter(item => {
+                return this.itemIsInCurrentSelection(item);
+            });
+        },
+        showMarquee() {
+            let selectionPath = this.selection[0];
+            let singleSelectedLine = this.selection.length === 1 &&
                     selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
-                return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
+            return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
+        }
+    },
+    inject: ['openmct', 'options', 'objectPath'],
+    mounted() {
+        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
+            this.internalDomainObject = JSON.parse(JSON.stringify(obj));
+        }.bind(this));
+        this.openmct.selection.on('change', this.setSelection);
+        this.initializeItems();
+        this.composition = this.openmct.composition.get(this.internalDomainObject);
+        this.composition.on('add', this.addChild);
+        this.composition.on('remove', this.removeChild);
+        this.composition.load();
+    },
+    destroyed: function () {
+        this.openmct.selection.off('change', this.setSelection);
+        this.composition.off('add', this.addChild);
+        this.composition.off('remove', this.removeChild);
+        this.unlisten();
+    },
+    methods: {
+        addElement(itemType, element) {
+            this.addItem(itemType + '-view', element);
+        },
+        setSelection(selection) {
+            this.selection = selection;
+        },
+        itemIsInCurrentSelection(item) {
+            return this.selection.some(selectionPath =>
+                selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
+        },
+        bypassSelection($event) {
+            if (this.dragInProgress) {
+                if ($event) {
+                    $event.stopImmediatePropagation();
+                }
+                this.dragInProgress = false;
+                return;
             }
         },
-        inject: ['openmct', 'options', 'objectPath'],
-        props: ['domainObject'],
-        components: components,
-        methods: {
-            addElement(itemType, element) {
-                this.addItem(itemType + '-view', element);
-            },
-            setSelection(selection) {
-                this.selection = selection;
-            },
-            itemIsInCurrentSelection(item) {
-                return this.selection.some(selectionPath =>
-                    selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
-            },
-            bypassSelection($event) {
-                if (this.dragInProgress) {
-                    if ($event) {
-                        $event.stopImmediatePropagation();
-                    }
-                    this.dragInProgress = false;
-                    return;
-                }
-            },
-            endLineResize(item, updates) {
-                this.dragInProgress = true;
-                let index = this.layoutItems.indexOf(item);
-                Object.assign(item, updates);
-                this.mutate(`configuration.items[${index}]`, item);
-            },
-            endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
-                this.dragInProgress = true;
-                this.layoutItems.forEach(item => {
-                    if (this.itemIsInCurrentSelection(item)) {
-                        let itemXInMarqueeSpace = item.x - marqueeStart.x;
-                        let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
-                        item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
+        endLineResize(item, updates) {
+            this.dragInProgress = true;
+            let index = this.layoutItems.indexOf(item);
+            Object.assign(item, updates);
+            this.mutate(`configuration.items[${index}]`, item);
+        },
+        endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
+            this.dragInProgress = true;
+            this.layoutItems.forEach(item => {
+                if (this.itemIsInCurrentSelection(item)) {
+                    let itemXInMarqueeSpace = item.x - marqueeStart.x;
+                    let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
+                    item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
 
-                        let itemYInMarqueeSpace = item.y - marqueeStart.y;
-                        let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
-                        item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+                    let itemYInMarqueeSpace = item.y - marqueeStart.y;
+                    let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
+                    item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
 
-                        if (item.x2) {
-                            let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
-                            let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
-                            item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
-                        } else {
-                            item.width = Math.round(item.width * scaleWidth);
-                        }
-
-                        if (item.y2) {
-                            let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
-                            let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
-                            item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
-                        } else {
-                            item.height = Math.round(item.height * scaleHeight);
-                        }
-                    }
-                });
-                this.mutate("configuration.items", this.layoutItems);
-            },
-            move(gridDelta) {
-                this.dragInProgress = true;
-
-                if (!this.initialPositions) {
-                    this.initialPositions = {};
-                    _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
-                        if (selectedItem.type === 'line-view') {
-                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
-                            this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
-                            this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
-                        } else {
-                            this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
-                        }
-
-                        this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
-                        this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : selectedItem.y;
-                    });
-                }
-
-                let layoutItems = this.layoutItems.map(item => {
-                    if (this.initialPositions[item.id]) {
-                        this.updateItemPosition(item, gridDelta);
-                    }
-                    return item;
-                });
-            },
-            updateItemPosition(item, gridDelta) {
-                let startingPosition = this.initialPositions[item.id];
-                let [startingX, startingY, startingX2, startingY2] = startingPosition;
-
-                if (this.startingMinX + gridDelta[0] >= 0) {
-                    if (item.x2 !== undefined) {
-                        if (this.startingMinX2 + gridDelta[0] >= 0) {
-                            item.x = startingX + gridDelta[0];
-                        }
+                    if (item.x2) {
+                        let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
+                        let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
+                        item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
                     } else {
+                        item.width = Math.round(item.width * scaleWidth);
+                    }
+
+                    if (item.y2) {
+                        let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
+                        let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
+                        item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
+                    } else {
+                        item.height = Math.round(item.height * scaleHeight);
+                    }
+                }
+            });
+            this.mutate("configuration.items", this.layoutItems);
+        },
+        move(gridDelta) {
+            this.dragInProgress = true;
+
+            if (!this.initialPositions) {
+                this.initialPositions = {};
+                _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
+                    if (selectedItem.type === 'line-view') {
+                        this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
+                        this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
+                        this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
+                    } else {
+                        this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
+                    }
+
+                    this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
+                    this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : selectedItem.y;
+                });
+            }
+
+            this.layoutItems.forEach(item => {
+                if (this.initialPositions[item.id]) {
+                    this.updateItemPosition(item, gridDelta);
+                }
+            });
+        },
+        updateItemPosition(item, gridDelta) {
+            let startingPosition = this.initialPositions[item.id];
+            let [startingX, startingY, startingX2, startingY2] = startingPosition;
+
+            if (this.startingMinX + gridDelta[0] >= 0) {
+                if (item.x2 !== undefined) {
+                    if (this.startingMinX2 + gridDelta[0] >= 0) {
                         item.x = startingX + gridDelta[0];
                     }
+                } else {
+                    item.x = startingX + gridDelta[0];
                 }
+            }
 
-                if (this.startingMinY + gridDelta[1] >= 0) {
-                    if (item.y2 !== undefined) {
-                        if (this.startingMinY2 + gridDelta[1] >= 0) {
-                            item.y = startingY + gridDelta[1];
-                        }
-                    } else {
+            if (this.startingMinY + gridDelta[1] >= 0) {
+                if (item.y2 !== undefined) {
+                    if (this.startingMinY2 + gridDelta[1] >= 0) {
                         item.y = startingY + gridDelta[1];
                     }
-                }
-
-                if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
-                    item.x2 = startingX2 + gridDelta[0];
-                }
-
-                if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
-                    item.y2 = startingY2 + gridDelta[1];
-                }
-            },
-            endMove() {
-                this.mutate('configuration.items', this.layoutItems);
-                this.initialPositions = undefined;
-                this.startingMinX = undefined;
-                this.startingMinY = undefined;
-                this.startingMinX2 = undefined;
-                this.startingMinY2 = undefined;
-            },
-            mutate(path, value) {
-                this.openmct.objects.mutate(this.internalDomainObject, path, value);
-            },
-            handleDrop($event) {
-                if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
-                    return;
-                }
-
-                $event.preventDefault();
-
-                let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object-path'))[0];
-                let elementRect = this.$el.getBoundingClientRect();
-                let droppedObjectPosition = [
-                    Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
-                    Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
-                ];
-
-                if (this.isTelemetry(domainObject)) {
-                    this.addItem('telemetry-view', domainObject, droppedObjectPosition);
                 } else {
-                    let identifier = this.openmct.objects.makeKeyString(domainObject.identifier);
-
-                    if (!this.objectViewMap[identifier]) {
-                        this.addItem('subobject-view', domainObject, droppedObjectPosition);
-                    } else {
-                        let prompt = this.openmct.overlays.dialog({
-                            iconClass: 'alert',
-                            message: "This item is already in layout and will not be added again.",
-                            buttons: [
-                                {
-                                    label: 'OK',
-                                    callback: function () {
-                                        prompt.dismiss();
-                                    }
-                                }
-                            ]
-                        });
-                    }
-                }
-            },
-            containsObject(identifier) {
-                return _.get(this.internalDomainObject, 'composition')
-                    .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
-            },
-            handleDragOver($event) {
-                // Get the ID of the dragged object
-                let draggedKeyString = $event.dataTransfer.types
-                    .filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
-                    .map(type => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
-                
-                // If the layout already contains the given object, then shortcut the default dragover behavior and 
-                // potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
-                if (this.containsObject(draggedKeyString)){
-                    $event.preventDefault();
-                }
-            },
-            isTelemetry(domainObject) {
-                if (this.openmct.telemetry.isTelemetryObject(domainObject) && 
-                    !this.options.showAsView.includes(domainObject.type)) {
-                    return true;
-                } else {
-                    return false;
-                }
-            },
-            addItem(itemType, ...options) {
-                let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
-                item.type = itemType;
-                item.id = uuid();
-                this.trackItem(item);
-                this.layoutItems.push(item);
-                this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
-                this.initSelectIndex = this.layoutItems.length - 1;
-            },
-            trackItem(item) {
-                if (!item.identifier) {
-                    return;
+                    item.y = startingY + gridDelta[1];
                 }
+            }
 
-                let keyString = this.openmct.objects.makeKeyString(item.identifier);
+            if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
+                item.x2 = startingX2 + gridDelta[0];
+            }
 
-                if (item.type === "telemetry-view") {
-                    let count = this.telemetryViewMap[keyString] || 0;
-                    this.telemetryViewMap[keyString] = ++count;
-                } else if (item.type === "subobject-view") {
-                    this.objectViewMap[keyString] = true;
-                }
-            },
-            removeItem(selectedItems) {
-                let indices = [];
-                this.initSelectIndex = -1;
-                selectedItems.forEach(selectedItem => {
-                    indices.push(selectedItem[0].context.index);
-                    this.untrackItem(selectedItem[0].context.layoutItem);
-                });
-                _.pullAt(this.layoutItems, indices);
-                this.mutate("configuration.items", this.layoutItems);
-                this.$el.click();
-            },
-            untrackItem(item) {
-                if (!item.identifier) {
-                    return;
-                }
-
-                let keyString = this.openmct.objects.makeKeyString(item.identifier);
-
-                if (item.type === 'telemetry-view') {
-                    let count = --this.telemetryViewMap[keyString];
-
-                    if (count === 0) {
-                        delete this.telemetryViewMap[keyString];
-                        this.removeFromComposition(keyString);
-                    }
-                } else if (item.type === 'subobject-view') {
-                    delete this.objectViewMap[keyString];
-                    this.removeFromComposition(keyString);
-                }
-            },
-            removeFromComposition(keyString) {
-                let composition = _.get(this.internalDomainObject, 'composition');
-                composition = composition.filter(identifier => {
-                    return this.openmct.objects.makeKeyString(identifier) !== keyString;
-                });
-                this.mutate("composition", composition);
-            },
-            initializeItems() {
-                this.telemetryViewMap = {};
-                this.objectViewMap = {};
-                this.layoutItems.forEach(this.trackItem);
-            },
-            addChild(child) {
-                let identifier = this.openmct.objects.makeKeyString(child.identifier);
-                if (this.isTelemetry(child)) {
-                    if (!this.telemetryViewMap[identifier]) {
-                        this.addItem('telemetry-view', child);
-                    }
-                } else if (!this.objectViewMap[identifier]) {
-                    this.addItem('subobject-view', child);
-                }
-            },
-            removeChild(identifier) {
-                let keyString = this.openmct.objects.makeKeyString(identifier);
-
-                if (this.objectViewMap[keyString]) {
-                    delete this.objectViewMap[keyString];
-                    this.removeFromConfiguration(keyString);
-                } else if (this.telemetryViewMap[keyString]) {
-                    delete this.telemetryViewMap[keyString];
-                    this.removeFromConfiguration(keyString);
-                }
-            },
-            removeFromConfiguration(keyString) {
-                let layoutItems = this.layoutItems.filter(item => {
-                    if (!item.identifier) {
-                        return true;
-                    } else {
-                        return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
-                    }
-                });
-                this.mutate("configuration.items", layoutItems);
-                this.$el.click();
-            },
-            orderItem(position, selectedItems) {
-                let delta = ORDERS[position];
-                let indices = [];
-                let newIndex = -1;
-                let items = [];
-
-                Object.assign(items, this.layoutItems);
-                this.selectedLayoutItems.forEach(selectedItem => {
-                    indices.push(this.layoutItems.indexOf(selectedItem));
-                });
-                indices.sort((a, b) => a - b);
-
-                if (position === 'top' || position === 'up') {
-                    indices.reverse();
-                }
-
-                if (position === 'top' || position === 'bottom') {
-                    this.moveToTopOrBottom(position, indices, items, delta);
-                } else {
-                    this.moveUpOrDown(position, indices, items, delta);
-                }
-
-                this.mutate('configuration.items', this.layoutItems);
-            },
-            moveUpOrDown(position, indices, items, delta) {
-                let previousItemIndex = -1;
-                let newIndex = -1;
-
-                indices.forEach((itemIndex, index) => {
-                    let isAdjacentItemSelected = position === 'up' ?
-                        itemIndex + 1 === previousItemIndex :
-                        itemIndex - 1 === previousItemIndex;
-
-                    if (index > 0 && isAdjacentItemSelected) {
-                        if (position === 'up') {
-                            newIndex -= 1;
-                        } else {
-                            newIndex += 1;
-                        }
-                    } else {
-                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
-                    }
-
-                    previousItemIndex = itemIndex;
-                    this.updateItemOrder(newIndex, itemIndex, items);
-                });
-            },
-            moveToTopOrBottom(position, indices, items, delta) {
-                let newIndex = -1;
-
-                indices.forEach((itemIndex, index) => {
-                    if (index === 0) {
-                        newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
-                    } else {
-                        if (position === 'top') {
-                            newIndex -= 1;
-                        } else {
-                            newIndex += 1;
-                        }
-                    }
-
-                    this.updateItemOrder(newIndex, itemIndex, items);
-                });
-            },
-            updateItemOrder(newIndex, itemIndex, items) {
-                if (newIndex !== itemIndex) {
-                    this.layoutItems.splice(itemIndex, 1);
-                    this.layoutItems.splice(newIndex, 0, items[itemIndex]);
-                }
-            },
-            updateTelemetryFormat(item, format) {
-                let index = _.findIndex(this.layoutItems, item);
-                item.format = format;
-                this.mutate(`configuration.items[${index}]`, item);
+            if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
+                item.y2 = startingY2 + gridDelta[1];
             }
         },
-        mounted() {
-            this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
-                this.internalDomainObject = JSON.parse(JSON.stringify(obj));
-            }.bind(this));
-            this.openmct.selection.on('change', this.setSelection);
-            this.initializeItems();
-            this.composition = this.openmct.composition.get(this.internalDomainObject);
-            this.composition.on('add', this.addChild);
-            this.composition.on('remove', this.removeChild);
-            this.composition.load();
+        endMove() {
+            this.mutate('configuration.items', this.layoutItems);
+            this.initialPositions = undefined;
+            this.startingMinX = undefined;
+            this.startingMinY = undefined;
+            this.startingMinX2 = undefined;
+            this.startingMinY2 = undefined;
         },
-        destroyed: function () {
-            this.openmct.selection.off('change', this.setSelection);
-            this.composition.off('add', this.addChild);
-            this.composition.off('remove', this.removeChild);
-            this.unlisten();
+        mutate(path, value) {
+            this.openmct.objects.mutate(this.internalDomainObject, path, value);
+        },
+        handleDrop($event) {
+            if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
+                return;
+            }
+
+            $event.preventDefault();
+
+            let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object-path'))[0];
+            let elementRect = this.$el.getBoundingClientRect();
+            let droppedObjectPosition = [
+                Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
+                Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
+            ];
+
+            if (this.isTelemetry(domainObject)) {
+                this.addItem('telemetry-view', domainObject, droppedObjectPosition);
+            } else {
+                let identifier = this.openmct.objects.makeKeyString(domainObject.identifier);
+
+                if (!this.objectViewMap[identifier]) {
+                    this.addItem('subobject-view', domainObject, droppedObjectPosition);
+                } else {
+                    let prompt = this.openmct.overlays.dialog({
+                        iconClass: 'alert',
+                        message: "This item is already in layout and will not be added again.",
+                        buttons: [
+                            {
+                                label: 'OK',
+                                callback: function () {
+                                    prompt.dismiss();
+                                }
+                            }
+                        ]
+                    });
+                }
+            }
+        },
+        containsObject(identifier) {
+            return _.get(this.internalDomainObject, 'composition')
+                .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
+        },
+        handleDragOver($event) {
+            // Get the ID of the dragged object
+            let draggedKeyString = $event.dataTransfer.types
+                .filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
+                .map(type => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
+
+                // If the layout already contains the given object, then shortcut the default dragover behavior and
+                // potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
+            if (this.containsObject(draggedKeyString)) {
+                $event.preventDefault();
+            }
+        },
+        isTelemetry(domainObject) {
+            if (this.openmct.telemetry.isTelemetryObject(domainObject) &&
+                    !this.options.showAsView.includes(domainObject.type)) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        addItem(itemType, ...options) {
+            let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
+            item.type = itemType;
+            item.id = uuid();
+            this.trackItem(item);
+            this.layoutItems.push(item);
+            this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
+            this.initSelectIndex = this.layoutItems.length - 1;
+        },
+        trackItem(item) {
+            if (!item.identifier) {
+                return;
+            }
+
+            let keyString = this.openmct.objects.makeKeyString(item.identifier);
+
+            if (item.type === "telemetry-view") {
+                let count = this.telemetryViewMap[keyString] || 0;
+                this.telemetryViewMap[keyString] = ++count;
+            } else if (item.type === "subobject-view") {
+                this.objectViewMap[keyString] = true;
+            }
+        },
+        removeItem(selectedItems) {
+            let indices = [];
+            this.initSelectIndex = -1;
+            selectedItems.forEach(selectedItem => {
+                indices.push(selectedItem[0].context.index);
+                this.untrackItem(selectedItem[0].context.layoutItem);
+            });
+            _.pullAt(this.layoutItems, indices);
+            this.mutate("configuration.items", this.layoutItems);
+            this.$el.click();
+        },
+        untrackItem(item) {
+            if (!item.identifier) {
+                return;
+            }
+
+            let keyString = this.openmct.objects.makeKeyString(item.identifier);
+
+            if (item.type === 'telemetry-view') {
+                let count = --this.telemetryViewMap[keyString];
+
+                if (count === 0) {
+                    delete this.telemetryViewMap[keyString];
+                    this.removeFromComposition(keyString);
+                }
+            } else if (item.type === 'subobject-view') {
+                delete this.objectViewMap[keyString];
+                this.removeFromComposition(keyString);
+            }
+        },
+        removeFromComposition(keyString) {
+            let composition = _.get(this.internalDomainObject, 'composition');
+            composition = composition.filter(identifier => {
+                return this.openmct.objects.makeKeyString(identifier) !== keyString;
+            });
+            this.mutate("composition", composition);
+        },
+        initializeItems() {
+            this.telemetryViewMap = {};
+            this.objectViewMap = {};
+            this.layoutItems.forEach(this.trackItem);
+        },
+        addChild(child) {
+            let identifier = this.openmct.objects.makeKeyString(child.identifier);
+            if (this.isTelemetry(child)) {
+                if (!this.telemetryViewMap[identifier]) {
+                    this.addItem('telemetry-view', child);
+                }
+            } else if (!this.objectViewMap[identifier]) {
+                this.addItem('subobject-view', child);
+            }
+        },
+        removeChild(identifier) {
+            let keyString = this.openmct.objects.makeKeyString(identifier);
+
+            if (this.objectViewMap[keyString]) {
+                delete this.objectViewMap[keyString];
+                this.removeFromConfiguration(keyString);
+            } else if (this.telemetryViewMap[keyString]) {
+                delete this.telemetryViewMap[keyString];
+                this.removeFromConfiguration(keyString);
+            }
+        },
+        removeFromConfiguration(keyString) {
+            let layoutItems = this.layoutItems.filter(item => {
+                if (!item.identifier) {
+                    return true;
+                } else {
+                    return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
+                }
+            });
+            this.mutate("configuration.items", layoutItems);
+            this.$el.click();
+        },
+        orderItem(position, selectedItems) {
+            let delta = ORDERS[position];
+            let indices = [];
+            let items = [];
+
+            Object.assign(items, this.layoutItems);
+            this.selectedLayoutItems.forEach(selectedItem => {
+                indices.push(this.layoutItems.indexOf(selectedItem));
+            });
+            indices.sort((a, b) => a - b);
+
+            if (position === 'top' || position === 'up') {
+                indices.reverse();
+            }
+
+            if (position === 'top' || position === 'bottom') {
+                this.moveToTopOrBottom(position, indices, items, delta);
+            } else {
+                this.moveUpOrDown(position, indices, items, delta);
+            }
+
+            this.mutate('configuration.items', this.layoutItems);
+        },
+        moveUpOrDown(position, indices, items, delta) {
+            let previousItemIndex = -1;
+            let newIndex = -1;
+
+            indices.forEach((itemIndex, index) => {
+                let isAdjacentItemSelected = position === 'up' ?
+                    itemIndex + 1 === previousItemIndex :
+                    itemIndex - 1 === previousItemIndex;
+
+                if (index > 0 && isAdjacentItemSelected) {
+                    if (position === 'up') {
+                        newIndex -= 1;
+                    } else {
+                        newIndex += 1;
+                    }
+                } else {
+                    newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+                }
+
+                previousItemIndex = itemIndex;
+                this.updateItemOrder(newIndex, itemIndex, items);
+            });
+        },
+        moveToTopOrBottom(position, indices, items, delta) {
+            let newIndex = -1;
+
+            indices.forEach((itemIndex, index) => {
+                if (index === 0) {
+                    newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
+                } else {
+                    if (position === 'top') {
+                        newIndex -= 1;
+                    } else {
+                        newIndex += 1;
+                    }
+                }
+
+                this.updateItemOrder(newIndex, itemIndex, items);
+            });
+        },
+        updateItemOrder(newIndex, itemIndex, items) {
+            if (newIndex !== itemIndex) {
+                this.layoutItems.splice(itemIndex, 1);
+                this.layoutItems.splice(newIndex, 0, items[itemIndex]);
+            }
+        },
+        updateTelemetryFormat(item, format) {
+            let index = _.findIndex(this.layoutItems, item);
+            item.format = format;
+            this.mutate(`configuration.items[${index}]`, item);
         }
     }
+}
 </script>

src/plugins/displayLayout/components/EditMarquee.vue

@@ -21,17 +21,28 @@
  *****************************************************************************/
 
 <template>
-        <!-- Resize handles -->
-        <div class="c-frame-edit" :style="style">
-            <div class="c-frame-edit__handle c-frame-edit__handle--nw"
-                 @mousedown="startResize([1,1], [-1,-1], $event)"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--ne"
-                 @mousedown="startResize([0,1], [1,-1], $event)"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--sw"
-                 @mousedown="startResize([1,0], [-1,1], $event)"></div>
-            <div class="c-frame-edit__handle c-frame-edit__handle--se"
-                 @mousedown="startResize([0,0], [1,1], $event)"></div>
-        </div>
+<!-- Resize handles -->
+<div
+    class="c-frame-edit"
+    :style="marqueeStyle"
+>
+    <div
+        class="c-frame-edit__handle c-frame-edit__handle--nw"
+        @mousedown="startResize([1,1], [-1,-1], $event)"
+    ></div>
+    <div
+        class="c-frame-edit__handle c-frame-edit__handle--ne"
+        @mousedown="startResize([0,1], [1,-1], $event)"
+    ></div>
+    <div
+        class="c-frame-edit__handle c-frame-edit__handle--sw"
+        @mousedown="startResize([1,0], [-1,1], $event)"
+    ></div>
+    <div
+        class="c-frame-edit__handle c-frame-edit__handle--se"
+        @mousedown="startResize([0,0], [1,1], $event)"
+    ></div>
+</div>
 </template>
 
 <style lang="scss">
@@ -95,139 +106,146 @@
 
 
 <script>
-    import LayoutDrag from './../LayoutDrag'
+import LayoutDrag from './../LayoutDrag'
 
-    export default {
-        inject: ['openmct'],
-        props: {
-            selectedLayoutItems: Array,
-            gridSize: Array
-        },        
-        data() {
-            return {
-                dragPosition: undefined
-            }
+export default {
+    inject: ['openmct'],
+    props: {
+        selectedLayoutItems: {
+            type: Array,
+            default: undefined
         },
-        computed: {
-            style() {
-                let x = Number.POSITIVE_INFINITY;
-                let y = Number.POSITIVE_INFINITY;
-                let width = Number.NEGATIVE_INFINITY;
-                let height = Number.NEGATIVE_INFINITY;
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        }
+    },
+    data() {
+        return {
+            dragPosition: undefined
+        }
+    },
+    computed: {
+        marqueePosition() {
+            let x = Number.POSITIVE_INFINITY;
+            let y = Number.POSITIVE_INFINITY;
+            let width = Number.NEGATIVE_INFINITY;
+            let height = Number.NEGATIVE_INFINITY;
 
-                this.selectedLayoutItems.forEach(item => {
-                    if (item.x2 !== undefined) {
-                        let lineWidth = Math.abs(item.x - item.x2);
-                        let lineMinX = Math.min(item.x, item.x2);
-                        x = Math.min(lineMinX, x);
-                        width = Math.max(lineWidth + lineMinX, width);
-                    } else {
-                        x = Math.min(item.x, x);
-                        width = Math.max(item.width + item.x, width);
-                    }
-
-                    if (item.y2 !== undefined) {
-                        let lineHeight = Math.abs(item.y - item.y2);
-                        let lineMinY = Math.min(item.y, item.y2);
-                        y = Math.min(lineMinY, y);
-                        height = Math.max(lineHeight + lineMinY, height);
-                    } else {
-                        y = Math.min(item.y, y);
-                        height = Math.max(item.height + item.y, height);
-                    }
-                });
-
-                if (this.dragPosition) {
-                    [x, y] = this.dragPosition.position;
-                    [width, height] = this.dragPosition.dimensions;
+            this.selectedLayoutItems.forEach(item => {
+                if (item.x2 !== undefined) {
+                    let lineWidth = Math.abs(item.x - item.x2);
+                    let lineMinX = Math.min(item.x, item.x2);
+                    x = Math.min(lineMinX, x);
+                    width = Math.max(lineWidth + lineMinX, width);
                 } else {
-                    width = width - x;
-                    height = height - y;
+                    x = Math.min(item.x, x);
+                    width = Math.max(item.width + item.x, width);
                 }
 
-                this.marqueePosition = {
-                    x: x,
-                    y: y,
-                    width: width,
-                    height: height
+                if (item.y2 !== undefined) {
+                    let lineHeight = Math.abs(item.y - item.y2);
+                    let lineMinY = Math.min(item.y, item.y2);
+                    y = Math.min(lineMinY, y);
+                    height = Math.max(lineHeight + lineMinY, height);
+                } else {
+                    y = Math.min(item.y, y);
+                    height = Math.max(item.height + item.y, height);
                 }
-                return this.getMarqueeStyle(x, y, width, height);
+            });
+
+            if (this.dragPosition) {
+                [x, y] = this.dragPosition.position;
+                [width, height] = this.dragPosition.dimensions;
+            } else {
+                width = width - x;
+                height = height - y;
+            }
+
+            return {
+                x: x,
+                y: y,
+                width: width,
+                height: height
             }
         },
-        methods: {
-            getMarqueeStyle(x, y, width, height) {
-                return {
-                    left: (this.gridSize[0] * x) + 'px',
-                    top: (this.gridSize[1] * y) + 'px',
-                    width: (this.gridSize[0] * width) + 'px',
-                    height: (this.gridSize[1] * height) + 'px'
-                };
-            },
-            updatePosition(event) {
-                let currentPosition = [event.pageX, event.pageY];
-                this.initialPosition = this.initialPosition || currentPosition;
-                this.delta = currentPosition.map(function (value, index) {
-                    return value - this.initialPosition[index];
-                }.bind(this));
-            },
-            startResize(posFactor, dimFactor, event) {
-                document.body.addEventListener('mousemove', this.continueResize);
-                document.body.addEventListener('mouseup', this.endResize);
-                this.marqueeStartPosition = {
-                    position: [this.marqueePosition.x, this.marqueePosition.y],
-                    dimensions: [this.marqueePosition.width, this.marqueePosition.height]
-                };
-                this.updatePosition(event);
-                this.activeDrag = new LayoutDrag(this.marqueeStartPosition, posFactor, dimFactor, this.gridSize);
-                event.preventDefault();
-            },
-            continueResize(event) {
-                event.preventDefault();
-                this.updatePosition(event);
-                this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
-            },
-            endResize(event) {
-                document.body.removeEventListener('mousemove', this.continueResize);
-                document.body.removeEventListener('mouseup', this.endResize);
-                this.continueResize(event);
+        marqueeStyle() {
+            return {
+                left: (this.gridSize[0] * this.marqueePosition.x) + 'px',
+                top: (this.gridSize[1] * this.marqueePosition.y) + 'px',
+                width: (this.gridSize[0] * this.marqueePosition.width) + 'px',
+                height: (this.gridSize[1] * this.marqueePosition.height) + 'px'
+            };
+        }
+    },
+    methods: {
+        updatePosition(event) {
+            let currentPosition = [event.pageX, event.pageY];
+            this.initialPosition = this.initialPosition || currentPosition;
+            this.delta = currentPosition.map(function (value, index) {
+                return value - this.initialPosition[index];
+            }.bind(this));
+        },
+        startResize(posFactor, dimFactor, event) {
+            document.body.addEventListener('mousemove', this.continueResize);
+            document.body.addEventListener('mouseup', this.endResize);
+            this.marqueeStartPosition = {
+                position: [this.marqueePosition.x, this.marqueePosition.y],
+                dimensions: [this.marqueePosition.width, this.marqueePosition.height]
+            };
+            this.updatePosition(event);
+            this.activeDrag = new LayoutDrag(this.marqueeStartPosition, posFactor, dimFactor, this.gridSize);
+            event.preventDefault();
+        },
+        continueResize(event) {
+            event.preventDefault();
+            this.updatePosition(event);
+            this.dragPosition = this.activeDrag.getAdjustedPositionAndDimensions(this.delta);
+        },
+        endResize(event) {
+            document.body.removeEventListener('mousemove', this.continueResize);
+            document.body.removeEventListener('mouseup', this.endResize);
+            this.continueResize(event);
 
-                let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
-                let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
-                let marqueeStartX = this.marqueeStartPosition.position[0];
-                let marqueeStartY = this.marqueeStartPosition.position[1];
+            let marqueeStartWidth = this.marqueeStartPosition.dimensions[0];
+            let marqueeStartHeight = this.marqueeStartPosition.dimensions[1];
+            let marqueeStartX = this.marqueeStartPosition.position[0];
+            let marqueeStartY = this.marqueeStartPosition.position[1];
 
-                let marqueeEndX = this.dragPosition.position[0];
-                let marqueeEndY = this.dragPosition.position[1];
-                let marqueeEndWidth = this.dragPosition.dimensions[0];
-                let marqueeEndHeight = this.dragPosition.dimensions[1];
+            let marqueeEndX = this.dragPosition.position[0];
+            let marqueeEndY = this.dragPosition.position[1];
+            let marqueeEndWidth = this.dragPosition.dimensions[0];
+            let marqueeEndHeight = this.dragPosition.dimensions[1];
 
-                let scaleWidth =  marqueeEndWidth / marqueeStartWidth;
-                let scaleHeight =  marqueeEndHeight / marqueeStartHeight;
+            let scaleWidth =  marqueeEndWidth / marqueeStartWidth;
+            let scaleHeight =  marqueeEndHeight / marqueeStartHeight;
 
-                let marqueeStart = {
-                    x: marqueeStartX,
-                    y: marqueeStartY,
-                    height: marqueeStartWidth,
-                    width: marqueeStartHeight
-                };
-                let marqueeEnd = {
-                    x: marqueeEndX,
-                    y: marqueeEndY,
-                    width: marqueeEndWidth,
-                    height: marqueeEndHeight
-                };
-                let marqueeOffset = {
-                    x: marqueeEnd.x - marqueeStart.x,
-                    y: marqueeEnd.y - marqueeStart.y
-                };
+            let marqueeStart = {
+                x: marqueeStartX,
+                y: marqueeStartY,
+                height: marqueeStartWidth,
+                width: marqueeStartHeight
+            };
+            let marqueeEnd = {
+                x: marqueeEndX,
+                y: marqueeEndY,
+                width: marqueeEndWidth,
+                height: marqueeEndHeight
+            };
+            let marqueeOffset = {
+                x: marqueeEnd.x - marqueeStart.x,
+                y: marqueeEnd.y - marqueeStart.y
+            };
 
-                this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
-                this.dragPosition = undefined;
-                this.initialPosition = undefined;
-                this.marqueeStartPosition = undefined;
-                this.delta = undefined;
-                event.preventDefault();
-            }
+            this.$emit('endResize', scaleWidth, scaleHeight, marqueeStart, marqueeOffset);
+            this.dragPosition = undefined;
+            this.initialPosition = undefined;
+            this.marqueeStartPosition = undefined;
+            this.delta = undefined;
+            event.preventDefault();
         }
     }
+}
 </script>

src/plugins/displayLayout/components/ImageView.vue

@@ -21,15 +21,18 @@
  *****************************************************************************/
 
 <template>
-    <layout-frame :item="item"
-                  :grid-size="gridSize"
-                  @move="(gridDelta) => $emit('move', gridDelta)"
-                  @endMove="() => $emit('endMove')">
-        <div class="c-image-view"
-             :style="style">
-        </div>
-    </layout-frame>
- </template>
+<layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    @move="(gridDelta) => $emit('move', gridDelta)"
+    @endMove="() => $emit('endMove')"
+>
+    <div
+        class="c-image-view"
+        :style="style"
+    ></div>
+</layout-frame>
+</template>
 
 <style lang="scss">
     @import '~styles/sass-base';
@@ -46,59 +49,70 @@
     }
 </style>
 
- <script>
-    import LayoutFrame from './LayoutFrame.vue'
+<script>
+import LayoutFrame from './LayoutFrame.vue'
 
-    export default {
-        makeDefinition(openmct, gridSize, element) {
+export default {
+    makeDefinition(openmct, gridSize, element) {
+        return {
+            stroke: 'transparent',
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 5,
+            url: element.url
+        };
+    },
+    inject: ['openmct'],
+    components: {
+        LayoutFrame
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        index: {
+            type: Number,
+            required: true
+        },
+        initSelect: Boolean
+    },
+    computed: {
+        style() {
             return {
-                stroke: 'transparent',
-                x: 1,
-                y: 1,
-                width: 10,
-                height: 5,
-                url: element.url
-            };
-        },
-        inject: ['openmct'],
-        props: {
-            item: Object,
-            gridSize: Array,
-            index: Number,
-            initSelect: Boolean
-        },
-        components: {
-            LayoutFrame
-        },
-        computed: {
-            style() {
-                return {
-                    backgroundImage: 'url(' + this.item.url + ')',
-                    border: '1px solid ' + this.item.stroke
-                }
-            }
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
-
-                this.context.index = newIndex;
-            }
-        },
-        mounted() {
-            this.context = {
-                layoutItem: this.item,
-                index: this.index
-            };
-            this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, this.context, this.initSelect);
-        },
-        destroyed() {
-            if (this.removeSelectable) {
-                this.removeSelectable();
+                backgroundImage: 'url(' + this.item.url + ')',
+                border: '1px solid ' + this.item.stroke
             }
         }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
+            }
+
+            this.context.index = newIndex;
+        }
+    },
+    mounted() {
+        this.context = {
+            layoutItem: this.item,
+            index: this.index
+        };
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
+    },
+    destroyed() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
+        }
     }
- </script>
+}
+</script>

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -21,19 +21,21 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout__frame c-frame"
-         :class="{
-             'no-frame': !item.hasFrame,
-             'u-inspectable': inspectable
-         }"
-         :style="style">
+<div
+    class="l-layout__frame c-frame"
+    :class="{
+        'no-frame': !item.hasFrame,
+        'u-inspectable': inspectable
+    }"
+    :style="style"
+>
+    <slot></slot>
 
-        <slot></slot>
-
-        <div class="c-frame-edit__move"
-             @mousedown="startMove([1,1], [0,0], $event)">
-        </div>
-    </div>
+    <div
+        class="c-frame-edit__move"
+        @mousedown="startMove([1,1], [0,0], $event)"
+    ></div>
+</div>
 </template>
 
 <style lang="scss">
@@ -173,73 +175,81 @@
 </style>
 
 <script>
-    import LayoutDrag from './../LayoutDrag'
+import LayoutDrag from './../LayoutDrag'
 
-    export default {
-        inject: ['openmct'],
-        props: {
-            item: Object,
-            gridSize: Array
+export default {
+    inject: ['openmct'],
+    props: {
+        item: {
+            type: Object,
+            required: true
         },
-        computed: {
-            style() {
-                let {x, y, width, height} = this.item;
-                return {
-                    left: (this.gridSize[0] * x) + 'px',
-                    top: (this.gridSize[1] * y) + 'px',
-                    width: (this.gridSize[0] * width) + 'px',
-                    height: (this.gridSize[1] * height) + 'px',
-                    minWidth: (this.gridSize[0] * width) + 'px',
-                    minHeight: (this.gridSize[1] * height) + 'px'
-                };
-            },
-            inspectable() {
-                return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        }
+    },
+    computed: {
+        style() {
+            let {x, y, width, height} = this.item;
+            return {
+                left: (this.gridSize[0] * x) + 'px',
+                top: (this.gridSize[1] * y) + 'px',
+                width: (this.gridSize[0] * width) + 'px',
+                height: (this.gridSize[1] * height) + 'px',
+                minWidth: (this.gridSize[0] * width) + 'px',
+                minHeight: (this.gridSize[1] * height) + 'px'
+            };
+        },
+        inspectable() {
+            return this.item.type === 'subobject-view' || this.item.type === 'telemetry-view';
+        }
+    },
+    methods: {
+        updatePosition(event) {
+            let currentPosition = [event.pageX, event.pageY];
+            this.initialPosition = this.initialPosition || currentPosition;
+            this.delta = currentPosition.map(function (value, index) {
+                return value - this.initialPosition[index];
+            }.bind(this));
+        },
+        startMove(posFactor, dimFactor, event) {
+            document.body.addEventListener('mousemove', this.continueMove);
+            document.body.addEventListener('mouseup', this.endMove);
+            this.dragPosition = {
+                position: [this.item.x, this.item.y]
+            };
+            this.updatePosition(event);
+            this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
+            event.preventDefault();
+        },
+        continueMove(event) {
+            event.preventDefault();
+            this.updatePosition(event);
+            let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
+
+            if (!_.isEqual(newPosition, this.dragPosition)) {
+                this.dragPosition = newPosition;
+                this.$emit('move', this.toGridDelta(this.delta));
             }
         },
-        methods: {
-            updatePosition(event) {
-                let currentPosition = [event.pageX, event.pageY];
-                this.initialPosition = this.initialPosition || currentPosition;
-                this.delta = currentPosition.map(function (value, index) {
-                    return value - this.initialPosition[index];
-                }.bind(this));
-            },
-            startMove(posFactor, dimFactor, event) {
-                document.body.addEventListener('mousemove', this.continueMove);
-                document.body.addEventListener('mouseup', this.endMove);
-                this.dragPosition = {
-                    position: [this.item.x, this.item.y]
-                };
-                this.updatePosition(event);
-                this.activeDrag = new LayoutDrag(this.dragPosition, posFactor, dimFactor, this.gridSize);
-                event.preventDefault();
-            },
-            continueMove(event) {
-                event.preventDefault();
-                this.updatePosition(event);
-                let newPosition = this.activeDrag.getAdjustedPosition(this.delta);
-
-                if (!_.isEqual(newPosition, this.dragPosition)) {
-                    this.dragPosition = newPosition;
-                    this.$emit('move', this.toGridDelta(this.delta));
-                }
-            },
-            endMove(event) {
-                document.body.removeEventListener('mousemove', this.continueMove);
-                document.body.removeEventListener('mouseup', this.endMove);
-                this.continueMove(event);
-                this.$emit('endMove');
-                this.dragPosition = undefined;
-                this.initialPosition = undefined;
-                this.delta = undefined;
-                event.preventDefault();
-            },
-            toGridDelta(pixelDelta) {
-                return pixelDelta.map((v, i) => {
-                    return Math.round(v / this.gridSize[i]);
-                });
-            }
+        endMove(event) {
+            document.body.removeEventListener('mousemove', this.continueMove);
+            document.body.removeEventListener('mouseup', this.endMove);
+            this.continueMove(event);
+            this.$emit('endMove');
+            this.dragPosition = undefined;
+            this.initialPosition = undefined;
+            this.delta = undefined;
+            event.preventDefault();
+        },
+        toGridDelta(pixelDelta) {
+            return pixelDelta.map((v, i) => {
+                return Math.round(v / this.gridSize[i]);
+            });
         }
     }
+}
 </script>

src/plugins/displayLayout/components/LineView.vue

@@ -21,244 +21,253 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout__frame c-frame no-frame"
-         :style="style">
-        <svg width="100%" height="100%">
-            <line v-bind="linePosition"
-                  :stroke="item.stroke"
-                  stroke-width="2">
-            </line>
-        </svg>
+<div
+    class="l-layout__frame c-frame no-frame"
+    :style="style"
+>
+    <svg
+        width="100%"
+        height="100%"
+    >
+        <line
+            v-bind="linePosition"
+            :stroke="item.stroke"
+            stroke-width="2"
+        />
+    </svg>
 
-        <div class="c-frame-edit__move"
-             @mousedown="startDrag($event)"></div>
-        <div class="c-frame-edit" v-if="showFrameEdit">
-            <div class="c-frame-edit__handle"
-                 :class="startHandleClass"
-                 @mousedown="startDrag($event, 'start')"></div>
-            <div class="c-frame-edit__handle"
-                 :class="endHandleClass"
-                 @mousedown="startDrag($event, 'end')"></div>
-        </div>
+    <div
+        class="c-frame-edit__move"
+        @mousedown="startDrag($event)"
+    ></div>
+    <div
+        v-if="showFrameEdit"
+        class="c-frame-edit"
+    >
+        <div
+            class="c-frame-edit__handle"
+            :class="startHandleClass"
+            @mousedown="startDrag($event, 'start')"
+        ></div>
+        <div
+            class="c-frame-edit__handle"
+            :class="endHandleClass"
+            @mousedown="startDrag($event, 'end')"
+        ></div>
     </div>
+</div>
 </template>
 
- <script>
+<script>
 
-    const START_HANDLE_QUADRANTS = {
-        1: 'c-frame-edit__handle--sw',
-        2: 'c-frame-edit__handle--se',
-        3: 'c-frame-edit__handle--ne',
-        4: 'c-frame-edit__handle--nw'
-    };
+const START_HANDLE_QUADRANTS = {
+    1: 'c-frame-edit__handle--sw',
+    2: 'c-frame-edit__handle--se',
+    3: 'c-frame-edit__handle--ne',
+    4: 'c-frame-edit__handle--nw'
+};
 
-    const END_HANDLE_QUADRANTS = {
-        1: 'c-frame-edit__handle--ne',
-        2: 'c-frame-edit__handle--nw',
-        3: 'c-frame-edit__handle--sw',
-        4: 'c-frame-edit__handle--se'
-    };
+const END_HANDLE_QUADRANTS = {
+    1: 'c-frame-edit__handle--ne',
+    2: 'c-frame-edit__handle--nw',
+    3: 'c-frame-edit__handle--sw',
+    4: 'c-frame-edit__handle--se'
+};
 
-    export default {
-        makeDefinition() {
+export default {
+    makeDefinition() {
+        return {
+            x: 5,
+            y: 10,
+            x2: 10,
+            y2: 5,
+            stroke: '#717171'
+        };
+    },
+    inject: ['openmct'],
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        initSelect: Boolean,
+        index: {
+            type: Number,
+            required: true
+        },
+        multiSelect: Boolean
+    },
+    data() {
+        return {
+            dragPosition: undefined,
+            dragging: undefined,
+            selection: []
+        };
+    },
+    computed: {
+        showFrameEdit() {
+            let layoutItem = this.selection.length > 0 && this.selection[0][0].context.layoutItem;
+            return !this.multiSelect && layoutItem && layoutItem.id === this.item.id;
+        },
+        position() {
+            let {x, y, x2, y2} = this.item;
+            if (this.dragging && this.dragPosition) {
+                ({x, y, x2, y2} = this.dragPosition);
+            }
+            return {x, y, x2, y2};
+        },
+        style() {
+            let {x, y, x2, y2} = this.position;
+            let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);
+            let height = Math.max(this.gridSize[1] * Math.abs(y - y2), 1);
+            let left = this.gridSize[0] * Math.min(x, x2);
+            let top = this.gridSize[1] * Math.min(y, y2);
             return {
-                x: 5,
-                y: 10,
-                x2: 10,
-                y2: 5,
-                stroke: '#717171'
+                left: `${left}px`,
+                top: `${top}px`,
+                width: `${width}px`,
+                height: `${height}px`
             };
         },
-        inject: ['openmct'],
-        props: {
-            item: Object,
-            gridSize: Array,
-            initSelect: Boolean,
-            index: Number,
-            multiSelect: Boolean
+        startHandleClass() {
+            return START_HANDLE_QUADRANTS[this.vectorQuadrant];
         },
-        data() {
-            return {
-                dragPosition: undefined,
-                dragging: undefined,
-                selection: []
-            };
+        endHandleClass() {
+            return END_HANDLE_QUADRANTS[this.vectorQuadrant];
         },
-        computed: {
-            showFrameEdit() {
-                let layoutItem = this.selection.length > 0 && this.selection[0][0].context.layoutItem;
-                return !this.multiSelect && layoutItem && layoutItem.id === this.item.id;
-            },
-            position() {
-                let {x, y, x2, y2} = this.item;
-                if (this.dragging && this.dragPosition) {
-                    ({x, y, x2, y2} = this.dragPosition);
-                }
-                return {x, y, x2, y2};
-            },
-            style() {
-                let {x, y, x2, y2} = this.position;
-                let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);
-                let height = Math.max(this.gridSize[1] * Math.abs(y - y2), 1);
-                let left = this.gridSize[0] * Math.min(x, x2);
-                let top = this.gridSize[1] * Math.min(y, y2);
-                return {
-                    left: `${left}px`,
-                    top: `${top}px`,
-                    width: `${width}px`,
-                    height: `${height}px`,
-                };
-            },
-            startHandleClass() {
-                return START_HANDLE_QUADRANTS[this.vectorQuadrant];
-            },
-            endHandleClass() {
-                return END_HANDLE_QUADRANTS[this.vectorQuadrant];
-            },
-            vectorQuadrant() {
-                let {x, y, x2, y2} = this.position;
-                if (x2 > x) {
-                    if (y2 < y) {
-                        return 1;
-                    }
-                    return 4;
-                }
+        vectorQuadrant() {
+            let {x, y, x2, y2} = this.position;
+            if (x2 > x) {
                 if (y2 < y) {
-                    return 2;
-                }
-                return 3;
-            },
-            linePosition() {
-                if (this.vectorQuadrant === 1) {
-                    return {
-                        x1: '0%',
-                        y1: '100%',
-                        x2: '100%',
-                        y2: '0%'
-                    };
-                }
-                if (this.vectorQuadrant === 4) {
-                    return {
-                        x1: '0%',
-                        y1: '0%',
-                        x2: '100%',
-                        y2: '100%'
-                    };
-                }
-                if (this.vectorQuadrant === 2) {
-                    return {
-                        x1: '0%',
-                        y1: '0%',
-                        x2: '100%',
-                        y2: '100%'
-                    };
-                }
-                if (this.vectorQuadrant === 3) {
-                    return {
-                        x1: '100%',
-                        y1: '0%',
-                        x2: '0%',
-                        y2: '100%'
-                    };
+                    return 1;
                 }
+                return 4;
             }
+            if (y2 < y) {
+                return 2;
+            }
+            return 3;
         },
-        methods: {
-            startDrag(event, position) {
-                this.dragging = position;
-                document.body.addEventListener('mousemove', this.continueDrag);
-                document.body.addEventListener('mouseup', this.endDrag);
-                this.startPosition = [event.pageX, event.pageY];
-                this.dragPosition = {
-                    x: this.item.x,
-                    y: this.item.y,
-                    x2: this.item.x2,
-                    y2: this.item.y2
+        linePosition() {
+            return this.vectorQuadrant % 2 !== 0
+                // odd vectorQuadrant slopes up
+                ? {
+                    x1: '0%',
+                    y1: '100%',
+                    x2: '100%',
+                    y2: '0%'
+                }
+                // even vectorQuadrant slopes down
+                : {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%'
                 };
-                event.preventDefault();
-            },
-            continueDrag(event) {
-                event.preventDefault();
-                let pxDeltaX = this.startPosition[0] - event.pageX;
-                let pxDeltaY = this.startPosition[1] - event.pageY;
-                let newPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
-
-                if (!this.dragging) {
-                    if (!_.isEqual(newPosition, this.dragPosition)) {
-                        let gridDelta = [event.pageX - this.startPosition[0], event.pageY - this.startPosition[1]];
-                        this.dragPosition = newPosition;
-                        this.$emit('move', this.toGridDelta(gridDelta));
-                    }
-                } else {
-                    this.dragPosition = newPosition;
-                }
-            },
-            endDrag(event) {
-                document.body.removeEventListener('mousemove', this.continueDrag);
-                document.body.removeEventListener('mouseup', this.endDrag);
-                let {x, y, x2, y2} = this.dragPosition;
-                if (!this.dragging) {
-                    this.$emit('endMove');
-                } else {
-                    this.$emit('endLineResize', this.item, {x, y, x2, y2});
-                }
-                this.dragPosition = undefined;
-                this.dragging = undefined;
-                event.preventDefault();
-            },
-            calculateDragPosition(pxDeltaX, pxDeltaY) {
-                let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
-                let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
-                let {x, y, x2, y2} = this.item;
-                let dragPosition = {x, y, x2, y2};
-
-                if (this.dragging === 'start') {
-                    dragPosition.x -= gridDeltaX;
-                    dragPosition.y -= gridDeltaY;
-                } else if (this.dragging === 'end') {
-                    dragPosition.x2 -= gridDeltaX;
-                    dragPosition.y2 -= gridDeltaY;
-                } else {
-                    // dragging entire line.
-                    dragPosition.x -= gridDeltaX;
-                    dragPosition.y -= gridDeltaY;
-                    dragPosition.x2 -= gridDeltaX;
-                    dragPosition.y2 -= gridDeltaY;
-                }
-                return dragPosition;
-            },
-            setSelection(selection) {
-                this.selection = selection;
-            },
-            toGridDelta(pixelDelta) {
-                return pixelDelta.map((v, i) => {
-                    return Math.round(v / this.gridSize[i]);
-                });
+        }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
             }
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
 
-                this.context.index = newIndex;
-            }
-        },
-        mounted() {
-            this.openmct.selection.on('change', this.setSelection);
-            this.context = {
-                layoutItem: this.item,
-                index: this.index
+            this.context.index = newIndex;
+        }
+    },
+    mounted() {
+        this.openmct.selection.on('change', this.setSelection);
+        this.context = {
+            layoutItem: this.item,
+            index: this.index
+        };
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
+    },
+    destroyed() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
+        }
+        this.openmct.selection.off('change', this.setSelection);
+    },
+    methods: {
+        startDrag(event, position) {
+            this.dragging = position;
+            document.body.addEventListener('mousemove', this.continueDrag);
+            document.body.addEventListener('mouseup', this.endDrag);
+            this.startPosition = [event.pageX, event.pageY];
+            this.dragPosition = {
+                x: this.item.x,
+                y: this.item.y,
+                x2: this.item.x2,
+                y2: this.item.y2
             };
-            this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, this.context, this.initSelect);
+            event.preventDefault();
         },
-        destroyed() {
-            if (this.removeSelectable) {
-                this.removeSelectable();
+        continueDrag(event) {
+            event.preventDefault();
+            let pxDeltaX = this.startPosition[0] - event.pageX;
+            let pxDeltaY = this.startPosition[1] - event.pageY;
+            let newPosition = this.calculateDragPosition(pxDeltaX, pxDeltaY);
+
+            if (!this.dragging) {
+                if (!_.isEqual(newPosition, this.dragPosition)) {
+                    let gridDelta = [event.pageX - this.startPosition[0], event.pageY - this.startPosition[1]];
+                    this.dragPosition = newPosition;
+                    this.$emit('move', this.toGridDelta(gridDelta));
+                }
+            } else {
+                this.dragPosition = newPosition;
             }
-            this.openmct.selection.off('change', this.setSelection);
+        },
+        endDrag(event) {
+            document.body.removeEventListener('mousemove', this.continueDrag);
+            document.body.removeEventListener('mouseup', this.endDrag);
+            let {x, y, x2, y2} = this.dragPosition;
+            if (!this.dragging) {
+                this.$emit('endMove');
+            } else {
+                this.$emit('endLineResize', this.item, {x, y, x2, y2});
+            }
+            this.dragPosition = undefined;
+            this.dragging = undefined;
+            event.preventDefault();
+        },
+        calculateDragPosition(pxDeltaX, pxDeltaY) {
+            let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
+            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
+            let {x, y, x2, y2} = this.item;
+            let dragPosition = {x, y, x2, y2};
+
+            if (this.dragging === 'start') {
+                dragPosition.x -= gridDeltaX;
+                dragPosition.y -= gridDeltaY;
+            } else if (this.dragging === 'end') {
+                dragPosition.x2 -= gridDeltaX;
+                dragPosition.y2 -= gridDeltaY;
+            } else {
+                // dragging entire line.
+                dragPosition.x -= gridDeltaX;
+                dragPosition.y -= gridDeltaY;
+                dragPosition.x2 -= gridDeltaX;
+                dragPosition.y2 -= gridDeltaY;
+            }
+            return dragPosition;
+        },
+        setSelection(selection) {
+            this.selection = selection;
+        },
+        toGridDelta(pixelDelta) {
+            return pixelDelta.map((v, i) => {
+                return Math.round(v / this.gridSize[i]);
+            });
         }
     }
- </script>
+}
+</script>

src/plugins/displayLayout/components/SubobjectView.vue

@@ -20,106 +20,120 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-    <layout-frame :item="item"
-                  :grid-size="gridSize"
-                  :title="domainObject && domainObject.name"
-                  @move="(gridDelta) => $emit('move', gridDelta)"
-                  @endMove="() => $emit('endMove')">
-        <object-frame v-if="domainObject"
-                      :domain-object="domainObject"
-                      :object-path="currentObjectPath"
-                      :has-frame="item.hasFrame"
-                      :show-edit-view="false"
-                      ref="objectFrame">
-        </object-frame>
-    </layout-frame>
+<layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    :title="domainObject && domainObject.name"
+    @move="(gridDelta) => $emit('move', gridDelta)"
+    @endMove="() => $emit('endMove')"
+>
+    <object-frame
+        v-if="domainObject"
+        ref="objectFrame"
+        :domain-object="domainObject"
+        :object-path="currentObjectPath"
+        :has-frame="item.hasFrame"
+        :show-edit-view="false"
+    />
+</layout-frame>
 </template>
 
 <script>
-    import ObjectFrame from '../../../ui/components/ObjectFrame.vue'
-    import LayoutFrame from './LayoutFrame.vue'
+import ObjectFrame from '../../../ui/components/ObjectFrame.vue'
+import LayoutFrame from './LayoutFrame.vue'
 
-    const MINIMUM_FRAME_SIZE = [320, 180],
-          DEFAULT_DIMENSIONS = [10, 10],
-          DEFAULT_POSITION = [1, 1],
-          DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget'];
+const MINIMUM_FRAME_SIZE = [320, 180],
+    DEFAULT_DIMENSIONS = [10, 10],
+    DEFAULT_POSITION = [1, 1],
+    DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget'];
 
-    function getDefaultDimensions(gridSize) {
-        return MINIMUM_FRAME_SIZE.map((min, index) => {
-            return Math.max(
-                Math.ceil(min / gridSize[index]),
-                DEFAULT_DIMENSIONS[index]
-            );
-        });
-    }
+function getDefaultDimensions(gridSize) {
+    return MINIMUM_FRAME_SIZE.map((min, index) => {
+        return Math.max(
+            Math.ceil(min / gridSize[index]),
+            DEFAULT_DIMENSIONS[index]
+        );
+    });
+}
 
-    function hasFrameByDefault(type) {
-        return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
-    }
+function hasFrameByDefault(type) {
+    return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
+}
 
-    export default {
-        makeDefinition(openmct, gridSize, domainObject, position) {
-            let defaultDimensions = getDefaultDimensions(gridSize);
-            position = position || DEFAULT_POSITION;
+export default {
+    makeDefinition(openmct, gridSize, domainObject, position) {
+        let defaultDimensions = getDefaultDimensions(gridSize);
+        position = position || DEFAULT_POSITION;
 
-            return {
-                width: defaultDimensions[0],
-                height: defaultDimensions[1],
-                x: position[0],
-                y: position[1],
-                identifier: domainObject.identifier,
-                hasFrame: hasFrameByDefault(domainObject.type)
-            };
+        return {
+            width: defaultDimensions[0],
+            height: defaultDimensions[1],
+            x: position[0],
+            y: position[1],
+            identifier: domainObject.identifier,
+            hasFrame: hasFrameByDefault(domainObject.type)
+        };
+    },
+    inject: ['openmct', 'objectPath'],
+    components: {
+        ObjectFrame,
+        LayoutFrame
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
         },
-        inject: ['openmct', 'objectPath'],
-        props: {
-            item: Object,
-            gridSize: Array,
-            initSelect: Boolean,
-            index: Number
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
         },
-        data() {
-            return {
-                domainObject: undefined,
-                currentObjectPath: []
+        initSelect: Boolean,
+        index: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            domainObject: undefined,
+            currentObjectPath: []
+        }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
             }
-        },
-        components: {
-            ObjectFrame,
-            LayoutFrame
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
 
-                this.context.index = newIndex;
-            }
-        },
-        methods: {
-            setObject(domainObject) {
-                this.domainObject = domainObject;
-                this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
-                this.$nextTick(function () {
-                    let childContext = this.$refs.objectFrame.getSelectionContext();
-                    childContext.item = domainObject;
-                    childContext.layoutItem = this.item;
-                    childContext.index = this.index;
-                    this.context = childContext;
-                    this.removeSelectable = this.openmct.selection.selectable(
-                        this.$el, this.context, this.initSelect);
-                });
-            }
-        },
-        mounted() {
-            this.openmct.objects.get(this.item.identifier)
-                .then(this.setObject);
-        },
-        destroyed() {
-            if (this.removeSelectable) {
-                this.removeSelectable();
-            }
+            this.context.index = newIndex;
+        }
+    },
+    mounted() {
+        this.openmct.objects.get(this.item.identifier)
+            .then(this.setObject);
+    },
+    destroyed() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
+        }
+    },
+    methods: {
+        setObject(domainObject) {
+            this.domainObject = domainObject;
+            this.currentObjectPath = [this.domainObject].concat(this.objectPath.slice());
+            this.$nextTick(function () {
+                let childContext = this.$refs.objectFrame.getSelectionContext();
+                childContext.item = domainObject;
+                childContext.layoutItem = this.item;
+                childContext.index = this.index;
+                this.context = childContext;
+                this.removeSelectable = this.openmct.selection.selectable(
+                    this.$el, this.context, this.initSelect);
+            });
         }
     }
+}
 </script>

src/plugins/displayLayout/components/TelemetryView.vue

@@ -20,29 +20,41 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
- <template>
-     <layout-frame :item="item"
-                   :grid-size="gridSize"
-                   @move="(gridDelta) => $emit('move', gridDelta)"
-                   @endMove="() => $emit('endMove')">
-        <div class="c-telemetry-view"
-             :style="styleObject"
-             v-if="domainObject"
-             @contextmenu.prevent="showContextMenu">
-            <div v-if="showLabel"
-                  class="c-telemetry-view__label">
-                <div class="c-telemetry-view__label-text">{{ domainObject.name }}</div>
-            </div>
-
-            <div v-if="showValue"
-                  :title="fieldName"
-                  class="c-telemetry-view__value"
-                  :class="[telemetryClass]">
-                <div class="c-telemetry-view__value-text">{{ telemetryValue }}</div>
+<template>
+<layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    @move="(gridDelta) => $emit('move', gridDelta)"
+    @endMove="() => $emit('endMove')"
+>
+    <div
+        v-if="domainObject"
+        class="c-telemetry-view"
+        :style="styleObject"
+        @contextmenu.prevent="showContextMenu"
+    >
+        <div
+            v-if="showLabel"
+            class="c-telemetry-view__label"
+        >
+            <div class="c-telemetry-view__label-text">
+                {{ domainObject.name }}
             </div>
         </div>
-    </layout-frame>
- </template>
+
+        <div
+            v-if="showValue"
+            :title="fieldName"
+            class="c-telemetry-view__value"
+            :class="[telemetryClass]"
+        >
+            <div class="c-telemetry-view__value-text">
+                {{ telemetryValue }}
+            </div>
+        </div>
+    </div>
+</layout-frame>
+</template>
 
 <style lang="scss">
     @import '~styles/sass-base';
@@ -78,189 +90,200 @@
     }
 </style>
 
- <script>
-    import LayoutFrame from './LayoutFrame.vue'
-    import printj from 'printj'
+<script>
+import LayoutFrame from './LayoutFrame.vue'
+import printj from 'printj'
 
-    const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
-          DEFAULT_POSITION = [1, 1],
-          CONTEXT_MENU_ACTIONS = ['viewHistoricalData'];
+const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
+    DEFAULT_POSITION = [1, 1],
+    CONTEXT_MENU_ACTIONS = ['viewHistoricalData'];
 
-    export default {
-        makeDefinition(openmct, gridSize, domainObject, position) {
-            let metadata = openmct.telemetry.getMetadata(domainObject);
-            position = position || DEFAULT_POSITION;
+export default {
+    makeDefinition(openmct, gridSize, domainObject, position) {
+        let metadata = openmct.telemetry.getMetadata(domainObject);
+        position = position || DEFAULT_POSITION;
 
+        return {
+            identifier: domainObject.identifier,
+            x: position[0],
+            y: position[1],
+            width: DEFAULT_TELEMETRY_DIMENSIONS[0],
+            height: DEFAULT_TELEMETRY_DIMENSIONS[1],
+            displayMode: 'all',
+            value: metadata.getDefaultDisplayValue(),
+            stroke: "transparent",
+            fill: "transparent",
+            color: "",
+            size: "13px"
+        };
+    },
+    inject: ['openmct', 'objectPath'],
+    components: {
+        LayoutFrame
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        initSelect: Boolean,
+        index: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            datum: undefined,
+            formats: undefined,
+            domainObject: undefined,
+            currentObjectPath: undefined
+        }
+    },
+    computed: {
+        showLabel() {
+            let displayMode = this.item.displayMode;
+            return displayMode === 'all' || displayMode === 'label';
+        },
+        showValue() {
+            let displayMode = this.item.displayMode;
+            return displayMode === 'all' || displayMode === 'value';
+        },
+        styleObject() {
             return {
-                identifier: domainObject.identifier,
-                x: position[0],
-                y: position[1],
-                width: DEFAULT_TELEMETRY_DIMENSIONS[0],
-                height: DEFAULT_TELEMETRY_DIMENSIONS[1],
-                displayMode: 'all',
-                value: metadata.getDefaultDisplayValue(),
-                stroke: "transparent",
-                fill: "transparent",
-                color: "",
-                size: "13px"
+                backgroundColor: this.item.fill,
+                borderColor: this.item.stroke,
+                color: this.item.color,
+                fontSize: this.item.size
+            }
+        },
+        fieldName() {
+            return this.valueMetadata && this.valueMetadata.name;
+        },
+        valueMetadata() {
+            return this.datum && this.metadata.value(this.item.value);
+        },
+        valueFormatter() {
+            return this.formats[this.item.value];
+        },
+        telemetryValue() {
+            if (!this.datum) {
+                return;
+            }
+
+            if (this.item.format) {
+                return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]);
+            }
+
+            return this.valueFormatter && this.valueFormatter.format(this.datum);
+        },
+        telemetryClass() {
+            if (!this.datum) {
+                return;
+            }
+
+            let alarm = this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
+            return alarm && alarm.cssClass;
+        }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
+            }
+
+            this.context.index = newIndex;
+        },
+        item(newItem) {
+            this.context.layoutItem = newItem;
+        }
+    },
+    mounted() {
+        this.openmct.objects.get(this.item.identifier)
+            .then(this.setObject);
+        this.openmct.time.on("bounds", this.refreshData);
+    },
+    destroyed() {
+        this.removeSubscription();
+
+        if (this.removeSelectable) {
+            this.removeSelectable();
+        }
+
+        this.openmct.time.off("bounds", this.refreshData);
+    },
+    methods: {
+        requestHistoricalData() {
+            let bounds = this.openmct.time.bounds();
+            let options = {
+                start: bounds.start,
+                end: bounds.end,
+                size: 1,
+                strategy: 'latest'
             };
-        },
-        inject: ['openmct', 'objectPath'],
-        props: {
-            item: Object,
-            gridSize: Array,
-            initSelect: Boolean,
-            index: Number
-        },
-        components: {
-            LayoutFrame
-        },
-        computed: {
-            showLabel() {
-                let displayMode = this.item.displayMode;
-                return displayMode === 'all' || displayMode === 'label';
-            },
-            showValue() {
-                let displayMode = this.item.displayMode;
-                return displayMode === 'all' || displayMode === 'value';
-            },
-            styleObject() {
-                return {
-                    backgroundColor: this.item.fill,
-                    borderColor: this.item.stroke,
-                    color: this.item.color,
-                    fontSize: this.item.size
-                }
-            },
-            fieldName() {
-                return this.valueMetadata && this.valueMetadata.name;
-            },
-            valueMetadata() {
-                return this.datum && this.metadata.value(this.item.value);
-            },
-            valueFormatter() {
-                return this.formats[this.item.value];
-            },
-            telemetryValue() {
-                if (!this.datum) {
-                    return;
-                }
-
-                if (this.item.format) {
-                    return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]);
-                }
-
-                return this.valueFormatter && this.valueFormatter.format(this.datum);
-            },
-            telemetryClass() {
-                if (!this.datum) {
-                    return;
-                }
-
-                let alarm = this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
-                return alarm && alarm.cssClass;
-            }
-        },
-        data() {
-            return {
-                datum: undefined,
-                formats: undefined,
-                domainObject: undefined,
-                currentObjectPath: undefined
-            }
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
-
-                this.context.index = newIndex;
-            },
-            item(newItem) {
-                this.context.layoutItem = newItem;
-            }
-        },
-        methods: {
-            requestHistoricalData() {
-                let bounds = this.openmct.time.bounds();
-                let options = {
-                    start: bounds.start,
-                    end: bounds.end,
-                    size: 1,
-                    strategy: 'latest'
-                };
-                this.openmct.telemetry.request(this.domainObject, options)
-                    .then(data => {
-                        if (data.length > 0) {
-                            this.updateView(data[data.length - 1]);
-                        }
-                    });
-            },
-            subscribeToObject() {
-                this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
-                    if (this.openmct.time.clock() !== undefined) {
-                        this.updateView(datum);
+            this.openmct.telemetry.request(this.domainObject, options)
+                .then(data => {
+                    if (data.length > 0) {
+                        this.updateView(data[data.length - 1]);
                     }
-                }.bind(this));
-            },
-            updateView(datum) {
-                this.datum = datum;
-            },
-            removeSubscription() {
-                if (this.subscription) {
-                    this.subscription();
-                    this.subscription = undefined;
+                });
+        },
+        subscribeToObject() {
+            this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
+                if (this.openmct.time.clock() !== undefined) {
+                    this.updateView(datum);
                 }
-            },
-            refreshData(bounds, isTick) {
-                if (!isTick) {
-                    this.datum = undefined;
-                    this.requestHistoricalData(this.domainObject);
-                }
-            },
-            setObject(domainObject) {
-                this.domainObject = domainObject;
-                this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-                this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
-                this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
-                this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
-                this.requestHistoricalData();
-                this.subscribeToObject();
-
-                this.currentObjectPath = this.objectPath.slice();
-                this.currentObjectPath.unshift(this.domainObject);
-
-                this.context = {
-                    item: domainObject,
-                    layoutItem: this.item,
-                    index: this.index,
-                    updateTelemetryFormat: this.updateTelemetryFormat
-                };
-                this.removeSelectable = this.openmct.selection.selectable(
-                    this.$el, this.context, this.initSelect);
-            },
-            updateTelemetryFormat(format) {
-                this.$emit('formatChanged', this.item, format);
-            },
-            showContextMenu(event) {
-                this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
+            }.bind(this));
+        },
+        updateView(datum) {
+            this.datum = datum;
+        },
+        removeSubscription() {
+            if (this.subscription) {
+                this.subscription();
+                this.subscription = undefined;
             }
         },
-        mounted() {
-            this.openmct.objects.get(this.item.identifier)
-                .then(this.setObject);
-            this.openmct.time.on("bounds", this.refreshData);
-        },
-        destroyed() {
-            this.removeSubscription();
-
-            if (this.removeSelectable) {
-                this.removeSelectable();
+        refreshData(bounds, isTick) {
+            if (!isTick) {
+                this.datum = undefined;
+                this.requestHistoricalData(this.domainObject);
             }
+        },
+        setObject(domainObject) {
+            this.domainObject = domainObject;
+            this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+            this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
+            this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
+            this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+            this.requestHistoricalData();
+            this.subscribeToObject();
 
-            this.openmct.time.off("bounds", this.refreshData);
+            this.currentObjectPath = this.objectPath.slice();
+            this.currentObjectPath.unshift(this.domainObject);
+
+            this.context = {
+                item: domainObject,
+                layoutItem: this.item,
+                index: this.index,
+                updateTelemetryFormat: this.updateTelemetryFormat
+            };
+            this.removeSelectable = this.openmct.selection.selectable(
+                this.$el, this.context, this.initSelect);
+        },
+        updateTelemetryFormat(format) {
+            this.$emit('formatChanged', this.item, format);
+        },
+        showContextMenu(event) {
+            this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
         }
     }
+}
 
- </script>
+</script>

src/plugins/displayLayout/components/TextView.vue

@@ -20,17 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
- <template>
-    <layout-frame :item="item"
-                  :grid-size="gridSize"
-                  @move="(gridDelta) => $emit('move', gridDelta)"
-                  @endMove="() => $emit('endMove')">
-        <div class="c-text-view"
-             :style="style">
-            {{ item.text }}
-        </div>
-    </layout-frame>
- </template>
+<template>
+<layout-frame
+    :item="item"
+    :grid-size="gridSize"
+    @move="(gridDelta) => $emit('move', gridDelta)"
+    @endMove="() => $emit('endMove')"
+>
+    <div
+        class="c-text-view"
+        :style="style"
+    >
+        {{ item.text }}
+    </div>
+</layout-frame>
+</template>
 
 <style lang="scss">
     @import '~styles/sass-base';
@@ -46,65 +50,75 @@
     }
 </style>
 
- <script>
-    import LayoutFrame from './LayoutFrame.vue'
+<script>
+import LayoutFrame from './LayoutFrame.vue'
 
-    export default {
-        makeDefinition(openmct, gridSize, element) {
+export default {
+    makeDefinition(openmct, gridSize, element) {
+        return {
+            fill: 'transparent',
+            stroke: 'transparent',
+            size: '13px',
+            color: '',
+            x: 1,
+            y: 1,
+            width: 10,
+            height: 5,
+            text: element.text
+        };
+    },
+    inject: ['openmct'],
+    components: {
+        LayoutFrame
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        index: {
+            type: Number,
+            required: true
+        },
+        initSelect: Boolean
+    },
+    computed: {
+        style() {
             return {
-                fill: 'transparent',
-                stroke: 'transparent',
-                size: '13px',
-                color: '',
-                x: 1,
-                y: 1,
-                width: 10,
-                height: 5,
-                text: element.text
+                backgroundColor: this.item.fill,
+                borderColor: this.item.stroke,
+                color: this.item.color,
+                fontSize: this.item.size
             };
-        },
-        inject: ['openmct'],
-        props: {
-            item: Object,
-            gridSize: Array,
-            index: Number,
-            initSelect: Boolean
-        },
-        components: {
-            LayoutFrame
-        },
-        computed: {
-            style() {
-                return {
-                    backgroundColor: this.item.fill,
-                    borderColor: this.item.stroke,
-                    color: this.item.color,
-                    fontSize: this.item.size
-                };
+        }
+    },
+    watch: {
+        index(newIndex) {
+            if (!this.context) {
+                return;
             }
-        },
-        watch: {
-            index(newIndex) {
-                if (!this.context) {
-                    return;
-                }
 
-                this.context.index = newIndex;
-            }
-        },
-        mounted() {
-            this.context = {
-                layoutItem: this.item,
-                index: this.index
-            };
-            this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, this.context, this.initSelect);
-        },
-        destroyed() {
-            if (this.removeSelectable) {
-                this.removeSelectable();
-            }
+            this.context.index = newIndex;
+        }
+    },
+    mounted() {
+        this.context = {
+            layoutItem: this.item,
+            index: this.index
+        };
+        this.removeSelectable = this.openmct.selection.selectable(
+            this.$el, this.context, this.initSelect);
+    },
+    destroyed() {
+        if (this.removeSelectable) {
+            this.removeSelectable();
         }
     }
- </script>
- 
+}
+</script>

src/plugins/displayLayout/plugin.js

@@ -42,22 +42,22 @@ export default function DisplayLayoutPlugin(options) {
                 return {
                     show(container) {
                         component = new Vue({
+                            el: container,
                             components: {
                                 Layout
                             },
-                            template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>',
                             provide: {
                                 openmct,
                                 objectUtils,
                                 options,
                                 objectPath
                             },
-                            el: container,
                             data() {
                                 return {
                                     domainObject: domainObject
                                 };
-                            }
+                            },
+                            template: '<layout ref="displayLayout" :domain-object="domainObject"></layout>'
                         });
                     },
                     getSelectionContext() {

src/plugins/filters/FiltersInspectorViewProvider.js

@@ -48,11 +48,11 @@ define([
                             provide: {
                                 openmct
                             },
+                            el: element,
                             components: {
                                 FiltersView: FiltersView.default
                             },
-                            template: '<filters-view></filters-view>',
-                            el: element
+                            template: '<filters-view></filters-view>'
                         });
                     },
                     destroy: function () {

src/plugins/filters/components/FilterField.vue

@@ -1,56 +1,66 @@
 <template>
-    <div class="c-properties__section c-filter-settings">
-        <li class="c-properties__row c-filter-settings__setting"
-            v-for="(filter, index) in filterField.filters"
-            :key="index">
-            <div class="c-properties__label label"
-                 :disabled="useGlobal">
-                {{ filterField.name }} =
-            </div>
-            <div class="c-properties__value value">
-                <!-- EDITING -->
-                <!-- String input, editing -->
-                <template v-if="!filter.possibleValues && isEditing">
-                    <input class="c-input--flex"
-                           type="text"
-                           :id="`${filter}filterControl`"
-                           :disabled="useGlobal"
-                           :value="persistedValue(filter)"
-                           @change="updateFilterValue($event, filter)">
-                </template>
+<div class="c-properties__section c-filter-settings">
+    <li
+        v-for="(filter, index) in filterField.filters"
+        :key="index"
+        class="c-properties__row c-filter-settings__setting"
+    >
+        <div
+            class="c-properties__label label"
+            :disabled="useGlobal"
+        >
+            {{ filterField.name }} =
+        </div>
+        <div class="c-properties__value value">
+            <!-- EDITING -->
+            <!-- String input, editing -->
+            <template v-if="!filter.possibleValues && isEditing">
+                <input
+                    :id="`${filter}filterControl`"
+                    class="c-input--flex"
+                    type="text"
+                    :disabled="useGlobal"
+                    :value="persistedValue(filter)"
+                    @change="updateFilterValue($event, filter)"
+                >
+            </template>
 
-                <!-- Checkbox list, editing -->
-                <template v-if="filter.possibleValues && isEditing">
-                    <div class="c-checkbox-list__row"
-                         v-for="option in filter.possibleValues"
-                         :key="option.value">
-                        <input class="c-checkbox-list__input"
-                               type="checkbox"
-                               :id="`${option.value}filterControl`"
-                               :disabled="useGlobal"
-                               @change="updateFilterValue($event, filter.comparator, option.value)"
-                               :checked="isChecked(filter.comparator, option.value)">
-                        <span class="c-checkbox-list__value">
-                            {{ option.label }}
-                        </span>
-                    </div>
-                </template>
-
-                <!-- BROWSING -->
-                <!-- String input, NOT editing -->
-                <template v-if="!filter.possibleValues && !isEditing">
-                    {{ persistedValue(filter) }}
-                </template>
-
-                <!-- Checkbox list, NOT editing -->
-                <template v-if="filter.possibleValues && !isEditing">
-                    <span v-if="persistedFilters[filter.comparator]">
-                        {{ getFilterLabels(filter) }}
+            <!-- Checkbox list, editing -->
+            <template v-if="filter.possibleValues && isEditing">
+                <div
+                    v-for="option in filter.possibleValues"
+                    :key="option.value"
+                    class="c-checkbox-list__row"
+                >
+                    <input
+                        :id="`${option.value}filterControl`"
+                        class="c-checkbox-list__input"
+                        type="checkbox"
+                        :disabled="useGlobal"
+                        :checked="isChecked(filter.comparator, option.value)"
+                        @change="updateFilterValue($event, filter.comparator, option.value)"
+                    >
+                    <span class="c-checkbox-list__value">
+                        {{ option.label }}
                     </span>
-                </template>
-            </div>
-        </li>
-    </div>
+                </div>
+            </template>
+
+            <!-- BROWSING -->
+            <!-- String input, NOT editing -->
+            <template v-if="!filter.possibleValues && !isEditing">
+                {{ persistedValue(filter) }}
+            </template>
+
+            <!-- Checkbox list, NOT editing -->
+            <template v-if="filter.possibleValues && !isEditing">
+                <span v-if="persistedFilters[filter.comparator]">
+                    {{ getFilterLabels(filter) }}
+                </span>
+            </template>
+        </div>
+    </li>
+</div>
 </template>
 
 <script>
@@ -59,7 +69,10 @@ export default {
         'openmct'
     ],
     props: {
-        filterField: Object,
+        filterField: {
+            type: Object,
+            required: true
+        },
         useGlobal: Boolean,
         persistedFilters: {
             type: Object,
@@ -73,6 +86,12 @@ export default {
             isEditing: this.openmct.editor.isEditing()
         }
     },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+    },
     methods: {
         toggleIsEditing(isEditing) {
             this.isEditing = isEditing;
@@ -107,12 +126,6 @@ export default {
                 return accum;
             }, []).join(', ');
         }
-    },
-    mounted() {
-        this.openmct.editor.on('isEditing', this.toggleIsEditing);
-    },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.toggleIsEditing);
     }
 }
 </script>

src/plugins/filters/components/FilterObject.vue

@@ -1,50 +1,62 @@
 <template>
-    <li class="c-tree__item-h">
-        <div class="c-tree__item menus-to-left"
-             @click="toggleExpanded">
-            <div class="c-filter-tree-item__filter-indicator"
-                :class="{'icon-filter': hasActiveFilters }"></div>
-            <span class="c-disclosure-triangle is-enabled flex-elem"
-              :class="{'c-disclosure-triangle--expanded': expanded}"></span>
-            <div class="c-tree__item__label c-object-label">
-                <div class="c-object-label">
-                    <div class="c-object-label__type-icon"
-                         :class="objectCssClass">
-                    </div>
-                    <div class="c-object-label__name flex-elem grows">{{ filterObject.name }}</div>
+<li class="c-tree__item-h">
+    <div
+        class="c-tree__item menus-to-left"
+        @click="toggleExpanded"
+    >
+        <div
+            class="c-filter-tree-item__filter-indicator"
+            :class="{'icon-filter': hasActiveFilters }"
+        ></div>
+        <span
+            class="c-disclosure-triangle is-enabled flex-elem"
+            :class="{'c-disclosure-triangle--expanded': expanded}"
+        ></span>
+        <div class="c-tree__item__label c-object-label">
+            <div class="c-object-label">
+                <div
+                    class="c-object-label__type-icon"
+                    :class="objectCssClass"
+                ></div>
+                <div class="c-object-label__name flex-elem grows">
+                    {{ filterObject.name }}
                 </div>
             </div>
         </div>
+    </div>
 
-        <div v-if="expanded">
-            <ul class="c-properties">
-                <div class="c-properties__label span-all"
-                     v-if="!isEditing && persistedFilters.useGlobal">
-                    Uses global filter
-                </div>
+    <div v-if="expanded">
+        <ul class="c-properties">
+            <div
+                v-if="!isEditing && persistedFilters.useGlobal"
+                class="c-properties__label span-all"
+            >
+                Uses global filter
+            </div>
 
-                <div class="c-properties__label span-all"
-                     v-if="isEditing">
-                    <toggle-switch
-                            :id="keyString"
-                            @change="useGlobalFilter"
-                            :checked="persistedFilters.useGlobal">
-                    </toggle-switch>
-                    Use global filter
-                </div>
-                <filter-field
-                        v-if="(!persistedFilters.useGlobal && !isEditing) || isEditing"
-                        v-for="metadatum in filterObject.metadataWithFilters"
-                        :key="metadatum.key"
-                        :filterField="metadatum"
-                        :useGlobal="persistedFilters.useGlobal"
-                        :persistedFilters="updatedFilters[metadatum.key]"
-                        @filterSelected="updateFiltersWithSelectedValue"
-                        @filterTextValueChanged="updateFiltersWithTextValue">
-                </filter-field>
-            </ul>
-        </div>
-    </li>
+            <div
+                v-if="isEditing"
+                class="c-properties__label span-all"
+            >
+                <toggle-switch
+                    :id="keyString"
+                    :checked="persistedFilters.useGlobal"
+                    @change="useGlobalFilter"
+                />
+                Use global filter
+            </div>
+            <filter-field
+                v-for="metadatum in activeFilters"
+                :key="metadatum.key"
+                :filter-field="metadatum"
+                :use-global="persistedFilters.useGlobal"
+                :persisted-filters="updatedFilters[metadatum.key]"
+                @filterSelected="updateFiltersWithSelectedValue"
+                @filterTextValueChanged="updateFiltersWithTextValue"
+            />
+        </ul>
+    </div>
+</li>
 </template>
 
 <script>
@@ -58,7 +70,10 @@ export default {
         ToggleSwitch
     },
     props: {
-        filterObject: Object, 
+        filterObject: {
+            type: Object,
+            required: true
+        },
         persistedFilters: {
             type: Object,
             default: () => {
@@ -74,6 +89,23 @@ export default {
             isEditing: this.openmct.editor.isEditing()
         }
     },
+    computed: {
+        // do not show filter fields if using global filter
+        // if editing however, show all filter fields
+        activeFilters() {
+            if (!this.isEditing && this.persistedFilters.useGlobal) {
+                return []
+            }
+
+            return this.filterObject.metadataWithFilters
+        },
+        hasActiveFilters() {
+            // Should be true when the user has entered any filter values.
+            return Object.values(this.persistedFilters).some(comparator => {
+                return (typeof(comparator) === 'object' && !_.isEmpty(comparator));
+            });
+        }
+    },
     watch: {
         persistedFilters: {
             handler: function checkFilters(newpersistedFilters) {
@@ -82,13 +114,14 @@ export default {
             deep: true
         }
     },
-    computed: {
-        hasActiveFilters() {
-            // Should be true when the user has entered any filter values.
-            return Object.values(this.persistedFilters).some(comparator => {
-                return (typeof(comparator) === 'object' && !_.isEmpty(comparator));
-            });
-        }
+    mounted() {
+        let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
+        this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
+        this.objectCssClass = type.definition.cssClass;
+        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.toggleIsEditing);
     },
     methods: {
         toggleExpanded() {
@@ -128,16 +161,7 @@ export default {
         },
         toggleIsEditing(isEditing) {
             this.isEditing = isEditing;
-        },
-    },
-    mounted() {
-        let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
-        this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
-        this.objectCssClass = type.definition.cssClass;
-        this.openmct.editor.on('isEditing', this.toggleIsEditing);
-    },
-    beforeDestroy() {
-        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+        }
     }
 }
 </script>

src/plugins/filters/components/FiltersView.vue

@@ -1,22 +1,28 @@
 <template>
-    <ul class="c-tree c-filter-tree" v-if="Object.keys(children).length">
-        <h2>Data Filters</h2>
-        <div class="c-filter-indication"
-            v-if="hasActiveFilters">{{ label }}
-        </div>
-        <global-filters
-            :globalFilters="globalFilters"
-            :globalMetadata="globalMetadata"
-            @persistGlobalFilters="persistGlobalFilters">
-        </global-filters>
-        <filter-object 
-            v-for="(child, key) in children"
-            :key="key"
-            :filterObject="child"
-            :persistedFilters="persistedFilters[key]"
-            @updateFilters="persistFilters">
-        </filter-object>
-    </ul>
+<ul
+    v-if="Object.keys(children).length"
+    class="c-tree c-filter-tree"
+>
+    <h2>Data Filters</h2>
+    <div
+        v-if="hasActiveFilters"
+        class="c-filter-indication"
+    >
+        {{ label }}
+    </div>
+    <global-filters
+        :global-filters="globalFilters"
+        :global-metadata="globalMetadata"
+        @persistGlobalFilters="persistGlobalFilters"
+    />
+    <filter-object
+        v-for="(child, key) in children"
+        :key="key"
+        :filter-object="child"
+        :persisted-filters="persistedFilters[key]"
+        @updateFilters="persistFilters"
+    />
+</ul>
 </template>
 
 <style lang="scss">
@@ -40,210 +46,211 @@
 </style>
 
 <script>
-    import FilterObject from './FilterObject.vue';
-    import GlobalFilters from './GlobalFilters.vue'
+import FilterObject from './FilterObject.vue';
+import GlobalFilters from './GlobalFilters.vue'
 
-    const FILTER_VIEW_TITLE = 'Filters applied';
-    const FILTER_VIEW_TITLE_MIXED = 'Mixed filters applied';
-    const USE_GLOBAL = 'useGlobal';
+const FILTER_VIEW_TITLE = 'Filters applied';
+const FILTER_VIEW_TITLE_MIXED = 'Mixed filters applied';
+const USE_GLOBAL = 'useGlobal';
 
-    export default {
-        components: {
-            FilterObject,
-            GlobalFilters
-        },
-        inject: [
-            'openmct'
-        ],
-        data() {
-            let providedObject = this.openmct.selection.get()[0][0].context.item;
-            let configuration = providedObject.configuration;
+export default {
+    components: {
+        FilterObject,
+        GlobalFilters
+    },
+    inject: [
+        'openmct'
+    ],
+    data() {
+        let providedObject = this.openmct.selection.get()[0][0].context.item;
+        let configuration = providedObject.configuration;
 
-            return {
-                persistedFilters: (configuration && configuration.filters) || {},
-                globalFilters: (configuration && configuration.globalFilters) || {},
-                globalMetadata: {},
-                providedObject,
-                children: {}
-            }
-        },
-        computed: {
-            hasActiveFilters() {
-                // Should be true when the user has entered any filter values.
-                return Object.values(this.persistedFilters).some(filters => {
-                    return Object.values(filters).some(comparator => {
-                        return (typeof(comparator) === 'object' && !_.isEmpty(comparator));
-                    });
+        return {
+            persistedFilters: (configuration && configuration.filters) || {},
+            globalFilters: (configuration && configuration.globalFilters) || {},
+            globalMetadata: {},
+            providedObject,
+            children: {}
+        }
+    },
+    computed: {
+        hasActiveFilters() {
+            // Should be true when the user has entered any filter values.
+            return Object.values(this.persistedFilters).some(filters => {
+                return Object.values(filters).some(comparator => {
+                    return (typeof(comparator) === 'object' && !_.isEmpty(comparator));
                 });
-            },
-            hasMixedFilters() {
-                // Should be true when filter values are mixed.
-                let filtersToCompare = _.omit(this.persistedFilters[Object.keys(this.persistedFilters)[0]], [USE_GLOBAL]);
-                return Object.values(this.persistedFilters).some(filters => {
-                    return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
-                });
-            },
-            label() {
-                if (this.hasActiveFilters) {
-                    if (this.hasMixedFilters) {
-                        return FILTER_VIEW_TITLE_MIXED;
-                    } else {
-                        return FILTER_VIEW_TITLE;
-                    }
+            });
+        },
+        hasMixedFilters() {
+            // Should be true when filter values are mixed.
+            let filtersToCompare = _.omit(this.persistedFilters[Object.keys(this.persistedFilters)[0]], [USE_GLOBAL]);
+            return Object.values(this.persistedFilters).some(filters => {
+                return !_.isEqual(filtersToCompare, _.omit(filters, [USE_GLOBAL]));
+            });
+        },
+        label() {
+            if (this.hasActiveFilters) {
+                if (this.hasMixedFilters) {
+                    return FILTER_VIEW_TITLE_MIXED;
+                } else {
+                    return FILTER_VIEW_TITLE;
                 }
             }
-        },
-        methods: {
-            addChildren(domainObject) {
-                let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-                let metadata = this.openmct.telemetry.getMetadata(domainObject);
-                let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
-                let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
-                let mutateFilters = false;
-                let childObject = {
-                    name: domainObject.name,
-                    domainObject: domainObject,
-                    metadataWithFilters
-                };
+            return '';
+        }
+    },
+    mounted() {
+        this.composition = this.openmct.composition.get(this.providedObject);
+        this.composition.on('add', this.addChildren);
+        this.composition.on('remove', this.removeChildren);
+        this.composition.load();
+        this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
+        this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
+        this.unobserveAllMutation = this.openmct.objects.observe(this.providedObject, '*', (mutatedObject) => this.providedObject = mutatedObject);
+    },
+    beforeDestroy() {
+        this.composition.off('add', this.addChildren);
+        this.composition.off('remove', this.removeChildren);
+        this.unobserve();
+        this.unobserveGlobalFilters();
+        this.unobserveAllMutation();
+    },
+    methods: {
+        addChildren(domainObject) {
+            let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+            let metadata = this.openmct.telemetry.getMetadata(domainObject);
+            let metadataWithFilters = metadata.valueMetadatas.filter(value => value.filters);
+            let hasFiltersWithKeyString = this.persistedFilters[keyString] !== undefined;
+            let mutateFilters = false;
+            let childObject = {
+                name: domainObject.name,
+                domainObject: domainObject,
+                metadataWithFilters
+            };
 
-                if (metadataWithFilters.length) {
-                    this.$set(this.children, keyString, childObject);
+            if (metadataWithFilters.length) {
+                this.$set(this.children, keyString, childObject);
 
-                    metadataWithFilters.forEach(metadatum => {
-                        if (!this.globalFilters[metadatum.key]) {
-                            this.$set(this.globalFilters, metadatum.key, {});
+                metadataWithFilters.forEach(metadatum => {
+                    if (!this.globalFilters[metadatum.key]) {
+                        this.$set(this.globalFilters, metadatum.key, {});
+                    }
+
+                    if (!this.globalMetadata[metadatum.key]) {
+                        this.$set(this.globalMetadata, metadatum.key, metadatum);
+                    }
+
+                    if (!hasFiltersWithKeyString) {
+                        if (!this.persistedFilters[keyString]) {
+                            this.$set(this.persistedFilters, keyString, {});
+                            this.$set(this.persistedFilters[keyString], 'useGlobal', true);
+                            mutateFilters = true;
                         }
 
-                        if (!this.globalMetadata[metadatum.key]) {
-                            this.$set(this.globalMetadata, metadatum.key, metadatum);
-                        }
-
-                        if (!hasFiltersWithKeyString) {
-                            if (!this.persistedFilters[keyString]) {
-                                this.$set(this.persistedFilters, keyString, {});
-                                this.$set(this.persistedFilters[keyString], 'useGlobal', true);
-                                mutateFilters = true;
-                            }
-
-                            this.$set(this.persistedFilters[keyString], metadatum.key, this.globalFilters[metadatum.key]);
-                        }
-                    });
-                }
-
-                if (mutateFilters) {
-                    this.mutateConfigurationFilters();
-                }
-            },
-            removeChildren(identifier) {
-                let keyString = this.openmct.objects.makeKeyString(identifier);
-                let globalFiltersToRemove = this.getGlobalFiltersToRemove(keyString);
-
-                if (globalFiltersToRemove.length > 0) {
-                    globalFiltersToRemove.forEach(key => {
-                        this.$delete(this.globalFilters, key);
-                        this.$delete(this.globalMetadata, key);
-                    });
-                    this.mutateConfigurationGlobalFilters();
-                }
-
-                this.$delete(this.children, keyString);
-                this.$delete(this.persistedFilters, keyString);
-                this.mutateConfigurationFilters();
-            },
-            getGlobalFiltersToRemove(keyString) {
-                let filtersToRemove = new Set();
-
-                this.children[keyString].metadataWithFilters.forEach(metadatum => {
-                    let keepFilter = false
-                    Object.keys(this.children).forEach(childKeyString => {
-                        if (childKeyString !== keyString) {
-                            let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
-
-                            if (filterMatched) {
-                                keepFilter = true;
-                                return;
-                            }
-                        }
-                    });
-
-                    if (!keepFilter) {
-                        filtersToRemove.add(metadatum.key);
+                        this.$set(this.persistedFilters[keyString], metadatum.key, this.globalFilters[metadatum.key]);
                     }
                 });
+            }
 
-                return Array.from(filtersToRemove);
-            },
-            persistFilters(keyString, updatedFilters, useGlobalValues) {
-                this.persistedFilters[keyString] = updatedFilters;
-
-                if (useGlobalValues) {
-                    Object.keys(this.persistedFilters[keyString]).forEach(key => {
-                        if (typeof(this.persistedFilters[keyString][key]) === 'object') {
-                            this.persistedFilters[keyString][key]  = this.globalFilters[key];
-                        }
-                    });
-                }
-            
+            if (mutateFilters) {
                 this.mutateConfigurationFilters();
-            },
-            updatePersistedFilters(filters) {
-                this.persistedFilters = filters;
-            },
-            persistGlobalFilters(key, filters) {
-                this.globalFilters[key] = filters[key];
+            }
+        },
+        removeChildren(identifier) {
+            let keyString = this.openmct.objects.makeKeyString(identifier);
+            let globalFiltersToRemove = this.getGlobalFiltersToRemove(keyString);
+
+            if (globalFiltersToRemove.length > 0) {
+                globalFiltersToRemove.forEach(key => {
+                    this.$delete(this.globalFilters, key);
+                    this.$delete(this.globalMetadata, key);
+                });
                 this.mutateConfigurationGlobalFilters();
-                let mutateFilters = false;
+            }
 
-                Object.keys(this.children).forEach(keyString => {
-                    if (this.persistedFilters[keyString].useGlobal !== false && this.containsField(keyString, key)) {
-                        if (!this.persistedFilters[keyString][key]) {
-                            this.$set(this.persistedFilters[keyString], key, {});
+            this.$delete(this.children, keyString);
+            this.$delete(this.persistedFilters, keyString);
+            this.mutateConfigurationFilters();
+        },
+        getGlobalFiltersToRemove(keyString) {
+            let filtersToRemove = new Set();
+
+            this.children[keyString].metadataWithFilters.forEach(metadatum => {
+                let keepFilter = false
+                Object.keys(this.children).forEach(childKeyString => {
+                    if (childKeyString !== keyString) {
+                        let filterMatched = this.children[childKeyString].metadataWithFilters.some(childMetadatum => childMetadatum.key === metadatum.key);
+
+                        if (filterMatched) {
+                            keepFilter = true;
+                            return;
                         }
-
-                        this.$set(this.persistedFilters[keyString], key, filters[key]);
-                        mutateFilters = true;
                     }
                 });
 
-                if (mutateFilters) {
-                    this.mutateConfigurationFilters();
+                if (!keepFilter) {
+                    filtersToRemove.add(metadatum.key);
                 }
-            },
-            updateGlobalFilters(filters) {
-                this.globalFilters = filters;
-            },
-            containsField(keyString, field) {
-                let hasField = false;
-                this.children[keyString].metadataWithFilters.forEach(metadatum => {
-                    if (metadatum.key === field) {
-                        hasField = true;
-                        return;
+            });
+
+            return Array.from(filtersToRemove);
+        },
+        persistFilters(keyString, updatedFilters, useGlobalValues) {
+            this.persistedFilters[keyString] = updatedFilters;
+
+            if (useGlobalValues) {
+                Object.keys(this.persistedFilters[keyString]).forEach(key => {
+                    if (typeof(this.persistedFilters[keyString][key]) === 'object') {
+                        this.persistedFilters[keyString][key]  = this.globalFilters[key];
                     }
                 });
-                return hasField;
-            },
-            mutateConfigurationFilters() {
-                this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
-            },
-            mutateConfigurationGlobalFilters() {
-                this.openmct.objects.mutate(this.providedObject, 'configuration.globalFilters', this.globalFilters);
+            }
+
+            this.mutateConfigurationFilters();
+        },
+        updatePersistedFilters(filters) {
+            this.persistedFilters = filters;
+        },
+        persistGlobalFilters(key, filters) {
+            this.globalFilters[key] = filters[key];
+            this.mutateConfigurationGlobalFilters();
+            let mutateFilters = false;
+
+            Object.keys(this.children).forEach(keyString => {
+                if (this.persistedFilters[keyString].useGlobal !== false && this.containsField(keyString, key)) {
+                    if (!this.persistedFilters[keyString][key]) {
+                        this.$set(this.persistedFilters[keyString], key, {});
+                    }
+
+                    this.$set(this.persistedFilters[keyString], key, filters[key]);
+                    mutateFilters = true;
+                }
+            });
+
+            if (mutateFilters) {
+                this.mutateConfigurationFilters();
             }
         },
-        mounted(){
-            this.composition = this.openmct.composition.get(this.providedObject);
-            this.composition.on('add', this.addChildren);
-            this.composition.on('remove', this.removeChildren);
-            this.composition.load();
-            this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
-            this.unobserveGlobalFilters = this.openmct.objects.observe(this.providedObject, 'configuration.globalFilters', this.updateGlobalFilters);
-            this.unobserveAllMutation = this.openmct.objects.observe(this.providedObject, '*', (mutatedObject) => this.providedObject = mutatedObject);
+        updateGlobalFilters(filters) {
+            this.globalFilters = filters;
         },
-        beforeDestroy() {
-            this.composition.off('add', this.addChildren);
-            this.composition.off('remove', this.removeChildren);
-            this.unobserve();
-            this.unobserveGlobalFilters();
-            this.unobserveAllMutation();
+        containsField(keyString, field) {
+            let hasField = false;
+            this.children[keyString].metadataWithFilters.forEach(metadatum => {
+                if (metadatum.key === field) {
+                    hasField = true;
+                    return;
+                }
+            });
+            return hasField;
+        },
+        mutateConfigurationFilters() {
+            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
+        },
+        mutateConfigurationGlobalFilters() {
+            this.openmct.objects.mutate(this.providedObject, 'configuration.globalFilters', this.globalFilters);
         }
     }
+}
 </script>

src/plugins/filters/components/GlobalFilters.vue

@@ -1,29 +1,40 @@
 <template>
-    <li class="c-tree__item-h">
-        <div class="c-tree__item menus-to-left"
-            @click="toggleExpanded">
-            <div class="c-filter-tree-item__filter-indicator"
-                :class="{'icon-filter': hasActiveGlobalFilters }"></div>
-            <span class="c-disclosure-triangle is-enabled flex-elem"
-                :class="{'c-disclosure-triangle--expanded': expanded}"></span>
-            <div class="c-tree__item__label c-object-label">
-                <div class="c-object-label">
-                    <div class="c-object-label__type-icon icon-gear"></div>
-                    <div class="c-object-label__name flex-elem grows">Global Filtering</div>
+<li class="c-tree__item-h">
+    <div
+        class="c-tree__item menus-to-left"
+        @click="toggleExpanded"
+    >
+        <div
+            class="c-filter-tree-item__filter-indicator"
+            :class="{'icon-filter': hasActiveGlobalFilters }"
+        ></div>
+        <span
+            class="c-disclosure-triangle is-enabled flex-elem"
+            :class="{'c-disclosure-triangle--expanded': expanded}"
+        ></span>
+        <div class="c-tree__item__label c-object-label">
+            <div class="c-object-label">
+                <div class="c-object-label__type-icon icon-gear"></div>
+                <div class="c-object-label__name flex-elem grows">
+                    Global Filtering
                 </div>
             </div>
         </div>
-        <ul class="c-properties" v-if="expanded">
-            <filter-field
-                v-for="metadatum in globalMetadata"
-                :key="metadatum.key"
-                :filterField="metadatum"
-                :persistedFilters="updatedFilters[metadatum.key]"
-                @filterSelected="updateFiltersWithSelectedValue"
-                @filterTextValueChanged="updateFiltersWithTextValue">
-            </filter-field>
-        </ul>
-    </li>
+    </div>
+    <ul
+        v-if="expanded"
+        class="c-properties"
+    >
+        <filter-field
+            v-for="metadatum in globalMetadata"
+            :key="metadatum.key"
+            :filter-field="metadatum"
+            :persisted-filters="updatedFilters[metadatum.key]"
+            @filterSelected="updateFiltersWithSelectedValue"
+            @filterTextValueChanged="updateFiltersWithTextValue"
+        />
+    </ul>
+</li>
 </template>
 
 <style lang="scss">
@@ -59,77 +70,80 @@
 </style>
 
 <script>
-    import FilterField from './FilterField.vue';
+import FilterField from './FilterField.vue';
 
-    export default {
-        inject: ['openmct'],
-        components: {
-            FilterField
+export default {
+    inject: ['openmct'],
+    components: {
+        FilterField
+    },
+    props: {
+        globalMetadata: {
+            type: Object,
+            required: true
         },
-        props: {
-            globalMetadata: Object,
-            globalFilters: {
-                type: Object,
-                default: () => {
-                    return {};
-                }
-            }
-        },
-        data() {
-            return {
-                expanded: false,
-                updatedFilters: JSON.parse(JSON.stringify(this.globalFilters))
-            }
-        },
-        computed: {
-            hasActiveGlobalFilters() {
-                return Object.values(this.globalFilters).some(field => {
-                    return Object.values(field).some(comparator => {
-                        return (comparator && (comparator !== '' || comparator.length > 0));
-                    });
-                });
-            }
-        },
-        watch: {
-            globalFilters: {
-                handler: function checkFilters(newGlobalFilters) {
-                    this.updatedFilters = JSON.parse(JSON.stringify(newGlobalFilters));
-                },
-                deep: true
-            }
-        },
-        methods: {
-            toggleExpanded() {
-                this.expanded = !this.expanded;
-            },
-            updateFiltersWithSelectedValue(key, comparator, valueName, value) {
-                let filterValue = this.updatedFilters[key];
-
-                if (filterValue[comparator]) {
-                    if (value === true) {
-                        filterValue[comparator].push(valueName);
-                    } else {
-                        if (filterValue[comparator].length === 1) {
-                            this.$set(this.updatedFilters, key, {});
-                        } else {
-                            filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
-                        }
-                    }
-                } else {
-                    this.$set(this.updatedFilters[key], comparator, [valueName]);
-                }
-
-                this.$emit('persistGlobalFilters', key, this.updatedFilters);
-            },
-            updateFiltersWithTextValue(key, comparator, value) {
-                if (value.trim() === '') {
-                    this.$set(this.updatedFilters, key, {});
-                } else {
-                    this.$set(this.updatedFilters[key], comparator, value);
-                }
-
-                this.$emit('persistGlobalFilters', key, this.updatedFilters);
+        globalFilters: {
+            type: Object,
+            default: () => {
+                return {};
             }
         }
+    },
+    data() {
+        return {
+            expanded: false,
+            updatedFilters: JSON.parse(JSON.stringify(this.globalFilters))
+        }
+    },
+    computed: {
+        hasActiveGlobalFilters() {
+            return Object.values(this.globalFilters).some(field => {
+                return Object.values(field).some(comparator => {
+                    return (comparator && (comparator !== '' || comparator.length > 0));
+                });
+            });
+        }
+    },
+    watch: {
+        globalFilters: {
+            handler: function checkFilters(newGlobalFilters) {
+                this.updatedFilters = JSON.parse(JSON.stringify(newGlobalFilters));
+            },
+            deep: true
+        }
+    },
+    methods: {
+        toggleExpanded() {
+            this.expanded = !this.expanded;
+        },
+        updateFiltersWithSelectedValue(key, comparator, valueName, value) {
+            let filterValue = this.updatedFilters[key];
+
+            if (filterValue[comparator]) {
+                if (value === true) {
+                    filterValue[comparator].push(valueName);
+                } else {
+                    if (filterValue[comparator].length === 1) {
+                        this.$set(this.updatedFilters, key, {});
+                    } else {
+                        filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
+                    }
+                }
+            } else {
+                this.$set(this.updatedFilters[key], comparator, [valueName]);
+            }
+
+            this.$emit('persistGlobalFilters', key, this.updatedFilters);
+        },
+        updateFiltersWithTextValue(key, comparator, value) {
+            if (value.trim() === '') {
+                this.$set(this.updatedFilters, key, {});
+            } else {
+                this.$set(this.updatedFilters[key], comparator, value);
+            }
+
+            this.$emit('persistGlobalFilters', key, this.updatedFilters);
+        }
     }
+}
 </script>

src/plugins/flexibleLayout/components/container.vue

@@ -21,62 +21,65 @@
  *****************************************************************************/
 
 <template>
-    <div class="c-fl-container"
-         :style="[{'flex-basis': sizeString}]"
-         :class="{'is-empty': !frames.length}">
-        <div class="c-fl-container__header"
-            v-show="isEditing"
-            draggable="true"
-            @dragstart="startContainerDrag">
-            <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
-        </div>
-
-        <drop-hint
-            class="c-fl-frame__drop-hint"
-            :index="-1"
-            :allow-drop="allowDrop"
-            @object-drop-to="moveOrCreateNewFrame">
-        </drop-hint>
-
-        <div class="c-fl-container__frames-holder">
-            <template
-                 v-for="(frame, i) in frames">
-
-                <frame-component
-                    class="c-fl-container__frame"
-                    :key="frame.id"
-                    :frame="frame"
-                    :index="i"
-                    :containerIndex="index"
-                    :isEditing="isEditing">
-                </frame-component>
-
-                <drop-hint
-                    class="c-fl-frame__drop-hint"
-                    :key="i"
-                    :index="i"
-                    :allowDrop="allowDrop"
-                    @object-drop-to="moveOrCreateNewFrame">
-                </drop-hint>
-
-                <resize-handle
-                    v-if="(i !== frames.length - 1)"
-                    :key="i"
-                    :index="i"
-                    :orientation="rowsLayout ? 'horizontal' : 'vertical'"
-                    @init-move="startFrameResizing"
-                    @move="frameResizing"
-                    @end-move="endFrameResizing"
-                    :isEditing="isEditing">
-                </resize-handle>
-            </template>
-        </div>
+<div
+    class="c-fl-container"
+    :style="[{'flex-basis': sizeString}]"
+    :class="{'is-empty': !frames.length}"
+>
+    <div
+        v-show="isEditing"
+        class="c-fl-container__header"
+        draggable="true"
+        @dragstart="startContainerDrag"
+    >
+        <span class="c-fl-container__size-indicator">{{ sizeString }}</span>
     </div>
+
+    <drop-hint
+        class="c-fl-frame__drop-hint"
+        :index="-1"
+        :allow-drop="allowDrop"
+        @object-drop-to="moveOrCreateNewFrame"
+    />
+
+    <div class="c-fl-container__frames-holder">
+        <template
+            v-for="(frame, i) in frames"
+        >
+            <frame-component
+                :key="frame.id"
+                class="c-fl-container__frame"
+                :frame="frame"
+                :index="i"
+                :container-index="index"
+                :is-editing="isEditing"
+            />
+
+            <drop-hint
+                :key="i"
+                class="c-fl-frame__drop-hint"
+                :index="i"
+                :allow-drop="allowDrop"
+                @object-drop-to="moveOrCreateNewFrame"
+            />
+
+            <resize-handle
+                v-if="(i !== frames.length - 1)"
+                :key="i"
+                :index="i"
+                :orientation="rowsLayout ? 'horizontal' : 'vertical'"
+                :is-editing="isEditing"
+                @init-move="startFrameResizing"
+                @move="frameResizing"
+                @end-move="endFrameResizing"
+            />
+        </template>
+    </div>
+</div>
 </template>
 
 <script>
 import FrameComponent from './frame.vue';
-import Frame from '../utils/frame';
 import ResizeHandle from './resizeHandle.vue';
 import DropHint from './dropHint.vue';
 
@@ -84,12 +87,26 @@ const MIN_FRAME_SIZE = 5;
 
 export default {
     inject:['openmct'],
-    props: ['container', 'index', 'rowsLayout', 'isEditing'],
     components: {
         FrameComponent,
         ResizeHandle,
         DropHint
     },
+    props: {
+        container: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            required: true
+        },
+        rowsLayout: Boolean,
+        isEditing: {
+            type: Boolean,
+            default: false
+        }
+    },
     computed: {
         frames() {
             return this.container.frames;
@@ -98,6 +115,19 @@ export default {
             return `${Math.round(this.container.size)}%`
         }
     },
+    mounted() {
+        let context = {
+            item: this.$parent.domainObject,
+            addContainer: this.addContainer,
+            type: 'container',
+            containerId: this.container.id
+        }
+
+        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
+    },
+    beforeDestroy() {
+        this.unsubscribeSelection();
+    },
     methods: {
         allowDrop(event, index) {
             if (event.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -131,7 +161,7 @@ export default {
                     insertIndex
                 );
                 return;
-            };
+            }
             // move frame.
             let frameId = event.dataTransfer.getData('frameid');
             let containerIndex = Number(event.dataTransfer.getData('containerIndex'));
@@ -182,19 +212,6 @@ export default {
         startContainerDrag(event) {
             event.dataTransfer.setData('containerid', this.container.id);
         }
-    },
-    mounted() {
-        let context = {
-            item: this.$parent.domainObject,
-            addContainer: this.addContainer,
-            type: 'container',
-            containerId: this.container.id
-        }
-
-        this.unsubscribeSelection = this.openmct.selection.selectable(this.$el, context, false);
-    },
-    beforeDestroy() {
-        this.unsubscribeSelection();
     }
 }
 </script>