[API] Changes to mutation API (#3483)

Changes how object mutation works behind the scenes in order to keep objects in sync automatically when their model changes.

* The way that objects are mutated and observed has not changed, openmct.objects.mutate and openmct.objects.observe should still be used in the same way that they were before.

* Behind the scenes, domain objects that are mutable are wrapped in a new MutableDomainObject that exposes mutator and observer functions that allow objects to be mutated in such a way that all instances can be kept in sync.

* It is now possible to retrieve MutableDomainObjects from the API, instead of regular domain objects. These are automatically updated when mutation occurs on any instance of the object, replacing the need for "*" listeners. Note that the view API now provides objects in this form by default. Therefore, you do not need to do anything differently in views, the domain objects will just magically keep themselves up to date.

* If for some reason you need to retrieve an object manually via openmct.objects.get (you should ask why you need to do this) and you want it to magically keep itself in sync, there is a new API function named openmct.objects.getMutable(identifier). Note that if you do this you will be responsible for the object's lifecycle. It relies on listeners which must be destroyed when the object is no longer needed, otherwise memory leaks will occur. You can destroy a MutableDomainObject and its (internal) listeners by calling openmct.objects.destroyMutable(mutableDomainObject). Any listeners created by calls to openmct.objects.observe need to be cleaned up separately.

* If the composition of a MutableDomainObject is retrieved using the Composition API, all children will be returned as MutableDomainObjects automatically. Their lifecycle will be managed automatically, and is tied to the lifecycle of the parent.
Any MutableDomainObject provided by the Open MCT framework itself (eg. provided to view providers by the View API, or from the composition API) will have its lifecycle managed by Open MCT, you don't need to worry destroying it.

platform/commonUI/edit/src/policies/EditPersistableObjectsPolicy.js

@@ -44,9 +44,9 @@ define(
             // is also invoked during the create process which should be allowed,
             // because it may be saved elsewhere
             if ((key === 'edit' && category === 'view-control') || key === 'properties') {
-                let newStyleObject = objectUtils.toNewFormat(domainObject, domainObject.getId());
+                let identifier = this.openmct.objects.parseKeyString(domainObject.getId());
 
-                return this.openmct.objects.isPersistable(newStyleObject);
+                return this.openmct.objects.isPersistable(identifier);
             }
 
             return true;

platform/commonUI/edit/test/policies/EditPersistableObjectsSpec.js

@@ -43,7 +43,8 @@ define(
                 );
 
                 mockObjectAPI = jasmine.createSpyObj('objectAPI', [
-                    'isPersistable'
+                    'isPersistable',
+                    'parseKeyString'
                 ]);
 
                 mockAPI = {

platform/containment/src/PersistableCompositionPolicy.js

@@ -48,9 +48,9 @@ define(
             // prevents editing of objects that cannot be persisted, so we can assume that this
             // is a new object.
             if (!(parent.hasCapability('editor') && parent.getCapability('editor').isEditContextRoot())) {
-                let newStyleObject = objectUtils.toNewFormat(parent, parent.getId());
+                let identifier = this.openmct.objects.parseKeyString(parent.getId());
 
-                return this.openmct.objects.isPersistable(newStyleObject);
+                return this.openmct.objects.isPersistable(identifier);
             }
 
             return true;

platform/containment/test/PersistableCompositionPolicySpec.js

@@ -33,7 +33,8 @@ define(
 
             beforeEach(function () {
                 objectAPI = jasmine.createSpyObj('objectsAPI', [
-                    'isPersistable'
+                    'isPersistable',
+                    'parseKeyString'
                 ]);
 
                 mockOpenMCT = {

src/MCT.js

@@ -219,7 +219,7 @@ define([
          * @memberof module:openmct.MCT#
          * @name objects
          */
-        this.objects = new api.ObjectAPI();
+        this.objects = new api.ObjectAPI.default(this.types);
 
         /**
          * An interface for retrieving and interpreting telemetry data associated
@@ -371,7 +371,7 @@ define([
      *        MCT; if undefined, MCT will be run in the body of the document
      */
     MCT.prototype.start = function (domElement = document.body, isHeadlessMode = false) {
-        if (!this.plugins.DisplayLayout._installed) {
+        if (this.types.get('layout') === undefined) {
             this.install(this.plugins.DisplayLayout({
                 showAsView: ['summary-widget']
             }));

src/adapter/services/LegacyObjectAPIInterceptor.js

@@ -61,6 +61,7 @@ define([
             const newStyleObject = utils.toNewFormat(legacyObject.getModel(), legacyObject.getId());
             const keystring = utils.makeKeyString(newStyleObject.identifier);
 
+            this.eventEmitter.emit(keystring + ':$_synchronize_model', newStyleObject);
             this.eventEmitter.emit(keystring + ":*", newStyleObject);
             this.eventEmitter.emit('mutation', newStyleObject);
         }.bind(this);

src/api/actions/ActionCollectionSpec.js

@@ -50,6 +50,10 @@ describe('The ActionCollection', () => {
                 }
             }
         ];
+        openmct.objects.addProvider('', jasmine.createSpyObj('mockMutableObjectProvider', [
+            'create',
+            'update'
+        ]));
         mockView = {
             getViewContext: () => {
                 return {

src/api/composition/CompositionCollection.js

@@ -60,6 +60,17 @@ define([
         };
         this.onProviderAdd = this.onProviderAdd.bind(this);
         this.onProviderRemove = this.onProviderRemove.bind(this);
+        this.mutables = {};
+
+        if (this.domainObject.isMutable) {
+            this.returnMutables = true;
+            let unobserve = this.domainObject.$on('$_destroy', () => {
+                Object.values(this.mutables).forEach(mutable => {
+                    this.publicAPI.objects.destroyMutable(mutable);
+                });
+                unobserve();
+            });
+        }
     }
 
     /**
@@ -75,10 +86,6 @@ define([
             throw new Error('Event not supported by composition: ' + event);
         }
 
-        if (!this.mutationListener) {
-            this._synchronize();
-        }
-
         if (this.provider.on && this.provider.off) {
             if (event === 'add') {
                 this.provider.on(
@@ -189,6 +196,13 @@ define([
 
             this.provider.add(this.domainObject, child.identifier);
         } else {
+            if (this.returnMutables && this.publicAPI.objects.supportsMutation(child)) {
+                let keyString = this.publicAPI.objects.makeKeyString(child.identifier);
+
+                child = this.publicAPI.objects._toMutable(child);
+                this.mutables[keyString] = child;
+            }
+
             this.emit('add', child);
         }
     };
@@ -202,6 +216,8 @@ define([
      * @name load
      */
     CompositionCollection.prototype.load = function () {
+        this.cleanUpMutables();
+
         return this.provider.load(this.domainObject)
             .then(function (children) {
                 return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
@@ -234,6 +250,14 @@ define([
         if (!skipMutate) {
             this.provider.remove(this.domainObject, child.identifier);
         } else {
+            if (this.returnMutables) {
+                let keyString = this.publicAPI.objects.makeKeyString(child);
+                if (this.mutables[keyString] !== undefined && this.mutables[keyString].isMutable) {
+                    this.publicAPI.objects.destroyMutable(this.mutables[keyString]);
+                    delete this.mutables[keyString];
+                }
+            }
+
             this.emit('remove', child);
         }
     };
@@ -281,12 +305,6 @@ define([
         this.remove(child, true);
     };
 
-    CompositionCollection.prototype._synchronize = function () {
-        this.mutationListener = this.publicAPI.objects.observe(this.domainObject, '*', (newDomainObject) => {
-            this.domainObject = JSON.parse(JSON.stringify(newDomainObject));
-        });
-    };
-
     CompositionCollection.prototype._destroy = function () {
         if (this.mutationListener) {
             this.mutationListener();
@@ -308,5 +326,11 @@ define([
         });
     };
 
+    CompositionCollection.prototype.cleanUpMutables = function () {
+        Object.values(this.mutables).forEach(mutable => {
+            this.publicAPI.objects.destroyMutable(mutable);
+        });
+    };
+
     return CompositionCollection;
 });

src/api/objects/MutableDomainObject.js

@@ -0,0 +1,137 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2020, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import _ from 'lodash';
+import utils from './object-utils.js';
+import EventEmitter from 'EventEmitter';
+
+const ANY_OBJECT_EVENT = 'mutation';
+
+/**
+ * Wraps a domain object to keep its model synchronized with other instances of the same object.
+ *
+ * Creating a MutableDomainObject will automatically register listeners to keep its model in sync. As such, developers
+ * should be careful to destroy MutableDomainObject in order to avoid memory leaks.
+ *
+ * All Open MCT API functions that provide objects will provide MutableDomainObjects where possible, except
+ * `openmct.objects.get()`, and will manage that object's lifecycle for you. Calling `openmct.objects.getMutable()`
+ * will result in the creation of a new MutableDomainObject and you will be responsible for destroying it
+ * (via openmct.objects.destroy) when you're done with it.
+ *
+ * @typedef MutableDomainObject
+ * @memberof module:openmct
+ */
+class MutableDomainObject {
+    constructor(eventEmitter) {
+        Object.defineProperties(this, {
+            _globalEventEmitter: {
+                value: eventEmitter,
+                // Property should not be serialized
+                enumerable: false
+            },
+            _instanceEventEmitter: {
+                value: new EventEmitter(),
+                // Property should not be serialized
+                enumerable: false
+            },
+            _observers: {
+                value: [],
+                // Property should not be serialized
+                enumerable: false
+            },
+            isMutable: {
+                value: true,
+                // Property should not be serialized
+                enumerable: false
+            }
+        });
+    }
+    $observe(path, callback) {
+        let fullPath = qualifiedEventName(this, path);
+        let eventOff =
+            this._globalEventEmitter.off.bind(this._globalEventEmitter, fullPath, callback);
+
+        this._globalEventEmitter.on(fullPath, callback);
+        this._observers.push(eventOff);
+
+        return eventOff;
+    }
+    $set(path, value) {
+        _.set(this, path, value);
+        _.set(this, 'modified', Date.now());
+
+        //Emit secret synchronization event first, so that all objects are in sync before subsequent events fired.
+        this._globalEventEmitter.emit(qualifiedEventName(this, '$_synchronize_model'), this);
+
+        //Emit a general "any object" event
+        this._globalEventEmitter.emit(ANY_OBJECT_EVENT, this);
+        //Emit wildcard event, with path so that callback knows what changed
+        this._globalEventEmitter.emit(qualifiedEventName(this, '*'), this, path, value);
+
+        //Emit events specific to properties affected
+        let parentPropertiesList = path.split('.');
+        for (let index = parentPropertiesList.length; index > 0; index--) {
+            let parentPropertyPath = parentPropertiesList.slice(0, index).join('.');
+            this._globalEventEmitter.emit(qualifiedEventName(this, parentPropertyPath), _.get(this, parentPropertyPath));
+        }
+
+        //TODO: Emit events for listeners of child properties when parent changes.
+        // Do it at observer time - also register observers for parent attribute path.
+    }
+    $on(event, callback) {
+        this._instanceEventEmitter.on(event, callback);
+
+        return () => this._instanceEventEmitter.off(event, callback);
+    }
+    $destroy() {
+        this._observers.forEach(observer => observer());
+        delete this._globalEventEmitter;
+        delete this._observers;
+        this._instanceEventEmitter.emit('$_destroy');
+    }
+
+    static createMutable(object, mutationTopic) {
+        let mutable = Object.create(new MutableDomainObject(mutationTopic));
+        Object.assign(mutable, object);
+
+        mutable.$observe('$_synchronize_model', (updatedObject) => {
+            let clone = JSON.parse(JSON.stringify(updatedObject));
+            let deleted = _.difference(Object.keys(mutable), Object.keys(updatedObject));
+            deleted.forEach((propertyName) => delete mutable[propertyName]);
+            Object.assign(mutable, clone);
+        });
+
+        return mutable;
+    }
+
+    static mutateObject(object, path, value) {
+        _.set(object, path, value);
+        _.set(object, 'modified', Date.now());
+    }
+}
+
+function qualifiedEventName(object, eventName) {
+    let keystring = utils.makeKeyString(object.identifier);
+
+    return [keystring, eventName].join(':');
+}
+
+export default MutableDomainObject;

src/api/objects/MutableObject.js

@@ -1,102 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2020, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define([
-    'objectUtils',
-    'lodash'
-], function (
-    utils,
-    _
-) {
-    const ANY_OBJECT_EVENT = "mutation";
-
-    /**
-     * The MutableObject wraps a DomainObject and provides getters and
-     * setters for
-     * @param eventEmitter
-     * @param object
-     * @interface MutableObject
-     */
-    function MutableObject(eventEmitter, object) {
-        this.eventEmitter = eventEmitter;
-        this.object = object;
-        this.unlisteners = [];
-    }
-
-    function qualifiedEventName(object, eventName) {
-        const keystring = utils.makeKeyString(object.identifier);
-
-        return [keystring, eventName].join(':');
-    }
-
-    MutableObject.prototype.stopListening = function () {
-        this.unlisteners.forEach(function (unlisten) {
-            unlisten();
-        });
-        this.unlisteners = [];
-    };
-
-    /**
-     * Observe changes to this domain object.
-     * @param {string} path the property to observe
-     * @param {Function} callback a callback to invoke when new values for
-     *        this property are observed
-     * @method on
-     * @memberof module:openmct.MutableObject#
-     */
-    MutableObject.prototype.on = function (path, callback) {
-        const fullPath = qualifiedEventName(this.object, path);
-        const eventOff =
-            this.eventEmitter.off.bind(this.eventEmitter, fullPath, callback);
-
-        this.eventEmitter.on(fullPath, callback);
-        this.unlisteners.push(eventOff);
-    };
-
-    /**
-     * Modify this domain object.
-     * @param {string} path the property to modify
-     * @param {*} value the new value for this property
-     * @method set
-     * @memberof module:openmct.MutableObject#
-     */
-    MutableObject.prototype.set = function (path, value) {
-        _.set(this.object, path, value);
-        _.set(this.object, 'modified', Date.now());
-
-        const handleRecursiveMutation = function (newObject) {
-            this.object = newObject;
-        }.bind(this);
-
-        //Emit wildcard event
-        this.eventEmitter.emit(qualifiedEventName(this.object, '*'), this.object);
-        //Emit a general "any object" event
-        this.eventEmitter.emit(ANY_OBJECT_EVENT, this.object);
-
-        this.eventEmitter.on(qualifiedEventName(this.object, '*'), handleRecursiveMutation);
-        //Emit event specific to property
-        this.eventEmitter.emit(qualifiedEventName(this.object, path), value);
-        this.eventEmitter.off(qualifiedEventName(this.object, '*'), handleRecursiveMutation);
-    };
-
-    return MutableObject;
-});

src/api/objects/ObjectAPI.js

@@ -20,365 +20,425 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([
+import utils from 'objectUtils';
-    'lodash',
+import MutableDomainObject from './MutableDomainObject';
-    'objectUtils',
+import RootRegistry from './RootRegistry';
-    './MutableObject',
+import RootObjectProvider from './RootObjectProvider';
-    './RootRegistry',
+import EventEmitter from 'EventEmitter';
-    './RootObjectProvider',
+import InterceptorRegistry from './InterceptorRegistry';
-    './InterceptorRegistry',
-    'EventEmitter'
-], function (
-    _,
-    utils,
-    MutableObject,
-    RootRegistry,
-    RootObjectProvider,
-    InterceptorRegistry,
-    EventEmitter
-) {
 
-    /**
+/**
-     * Utilities for loading, saving, and manipulating domain objects.
+ * Utilities for loading, saving, and manipulating domain objects.
-     * @interface ObjectAPI
+ * @interface ObjectAPI
-     * @memberof module:openmct
+ * @memberof module:openmct
-     */
+ */
 
-    function ObjectAPI() {
+function ObjectAPI(typeRegistry) {
-        this.eventEmitter = new EventEmitter();
+    this.typeRegistry = typeRegistry;
-        this.providers = {};
+    this.eventEmitter = new EventEmitter();
-        this.rootRegistry = new RootRegistry();
+    this.providers = {};
-        this.rootProvider = new RootObjectProvider.default(this.rootRegistry);
+    this.rootRegistry = new RootRegistry();
-        this.cache = {};
+    this.rootProvider = new RootObjectProvider(this.rootRegistry);
-        this.interceptorRegistry = new InterceptorRegistry.default();
+    this.cache = {};
+    this.interceptorRegistry = new InterceptorRegistry();
+}
+
+/**
+ * Set fallback provider, this is an internal API for legacy reasons.
+ * @private
+ */
+ObjectAPI.prototype.supersecretSetFallbackProvider = function (p) {
+    this.fallbackProvider = p;
+};
+
+/**
+ * Retrieve the provider for a given identifier.
+ * @private
+ */
+ObjectAPI.prototype.getProvider = function (identifier) {
+    if (identifier.key === 'ROOT') {
+        return this.rootProvider;
     }
 
-    /**
+    return this.providers[identifier.namespace] || this.fallbackProvider;
-     * Set fallback provider, this is an internal API for legacy reasons.
+};
-     * @private
-     */
-    ObjectAPI.prototype.supersecretSetFallbackProvider = function (p) {
-        this.fallbackProvider = p;
-    };
 
-    /**
+/**
-     * Retrieve the provider for a given identifier.
+ * Get the root-level object.
-     * @private
+ * @returns {Promise.<DomainObject>} a promise for the root object
-     */
+ */
-    ObjectAPI.prototype.getProvider = function (identifier) {
+ObjectAPI.prototype.getRoot = function () {
-        if (identifier.key === 'ROOT') {
+    return this.rootProvider.get();
-            return this.rootProvider;
+};
-        }
 
-        return this.providers[identifier.namespace] || this.fallbackProvider;
+/**
-    };
+ * Register a new object provider for a particular namespace.
+ *
+ * @param {string} namespace the namespace for which to provide objects
+ * @param {module:openmct.ObjectProvider} provider the provider which
+ *        will handle loading domain objects from this namespace
+ * @memberof {module:openmct.ObjectAPI#}
+ * @name addProvider
+ */
+ObjectAPI.prototype.addProvider = function (namespace, provider) {
+    this.providers[namespace] = provider;
+};
 
-    /**
+/**
-     * Get the root-level object.
+ * Provides the ability to read, write, and delete domain objects.
-     * @returns {Promise.<DomainObject>} a promise for the root object
+ *
-     */
+ * When registering a new object provider, all methods on this interface
-    ObjectAPI.prototype.getRoot = function () {
+ * are optional.
-        return this.rootProvider.get();
+ *
-    };
+ * @interface ObjectProvider
+ * @memberof module:openmct
+ */
 
-    /**
+/**
-     * Register a new object provider for a particular namespace.
+ * Create the given domain object in the corresponding persistence store
-     *
+ *
-     * @param {string} namespace the namespace for which to provide objects
+ * @method create
-     * @param {module:openmct.ObjectProvider} provider the provider which
+ * @memberof module:openmct.ObjectProvider#
-     *        will handle loading domain objects from this namespace
+ * @param {module:openmct.DomainObject} domainObject the domain object to
-     * @memberof {module:openmct.ObjectAPI#}
+ *        create
-     * @name addProvider
+ * @returns {Promise} a promise which will resolve when the domain object
-     */
+ *          has been created, or be rejected if it cannot be saved
-    ObjectAPI.prototype.addProvider = function (namespace, provider) {
+ */
-        this.providers[namespace] = provider;
-    };
 
-    /**
+/**
-     * Provides the ability to read, write, and delete domain objects.
+ * Update this domain object in its persistence store
-     *
+ *
-     * When registering a new object provider, all methods on this interface
+ * @method update
-     * are optional.
+ * @memberof module:openmct.ObjectProvider#
-     *
+ * @param {module:openmct.DomainObject} domainObject the domain object to
-     * @interface ObjectProvider
+ *        update
-     * @memberof module:openmct
+ * @returns {Promise} a promise which will resolve when the domain object
-     */
+ *          has been updated, or be rejected if it cannot be saved
+ */
 
-    /**
+/**
-     * Create the given domain object in the corresponding persistence store
+ * Delete this domain object.
-     *
+ *
-     * @method create
+ * @method delete
-     * @memberof module:openmct.ObjectProvider#
+ * @memberof module:openmct.ObjectProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object to
+ * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        create
+ *        delete
-     * @returns {Promise} a promise which will resolve when the domain object
+ * @returns {Promise} a promise which will resolve when the domain object
-     *          has been created, or be rejected if it cannot be saved
+ *          has been deleted, or be rejected if it cannot be deleted
-     */
+ */
 
-    /**
+/**
-     * Update this domain object in its persistence store
+ * Get a domain object.
-     *
+ *
-     * @method update
+ * @method get
-     * @memberof module:openmct.ObjectProvider#
+ * @memberof module:openmct.ObjectProvider#
-     * @param {module:openmct.DomainObject} domainObject the domain object to
+ * @param {string} key the key for the domain object to load
-     *        update
+ * @returns {Promise} a promise which will resolve when the domain object
-     * @returns {Promise} a promise which will resolve when the domain object
+ *          has been saved, or be rejected if it cannot be saved
-     *          has been updated, or be rejected if it cannot be saved
+ */
-     */
 
-    /**
+ObjectAPI.prototype.get = function (identifier) {
-     * Delete this domain object.
+    let keystring = this.makeKeyString(identifier);
-     *
+    if (this.cache[keystring] !== undefined) {
-     * @method delete
+        return this.cache[keystring];
-     * @memberof module:openmct.ObjectProvider#
+    }
-     * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        delete
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been deleted, or be rejected if it cannot be deleted
-     */
 
-    /**
+    identifier = utils.parseKeyString(identifier);
-     * Get a domain object.
+    const provider = this.getProvider(identifier);
-     *
-     * @method get
-     * @memberof module:openmct.ObjectProvider#
-     * @param {string} key the key for the domain object to load
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been saved, or be rejected if it cannot be saved
-     */
 
-    /**
+    if (!provider) {
-     * Get a domain object.
+        throw new Error('No Provider Matched');
-     *
+    }
-     * @method get
-     * @memberof module:openmct.ObjectAPI#
-     * @param {module:openmct.ObjectAPI~Identifier} identifier
-     *        the identifier for the domain object to load
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been saved, or be rejected if it cannot be saved
-     */
-    ObjectAPI.prototype.get = function (identifier) {
-        let keystring = this.makeKeyString(identifier);
-        if (this.cache[keystring] !== undefined) {
-            return this.cache[keystring];
-        }
 
-        identifier = utils.parseKeyString(identifier);
+    if (!provider.get) {
-        const provider = this.getProvider(identifier);
+        throw new Error('Provider does not support get!');
+    }
 
-        if (!provider) {
+    let objectPromise = provider.get(identifier);
-            throw new Error('No Provider Matched');
+    this.cache[keystring] = objectPromise;
-        }
 
-        if (!provider.get) {
+    return objectPromise.then(result => {
-            throw new Error('Provider does not support get!');
+        delete this.cache[keystring];
-        }
+        const interceptors = this.listGetInterceptors(identifier, result);
-
+        interceptors.forEach(interceptor => {
-        let objectPromise = provider.get(identifier);
+            result = interceptor.invoke(identifier, result);
-
-        this.cache[keystring] = objectPromise;
-
-        return objectPromise.then(result => {
-            delete this.cache[keystring];
-            const interceptors = this.listGetInterceptors(identifier, result);
-            interceptors.forEach(interceptor => {
-                result = interceptor.invoke(identifier, result);
-            });
-
-            return result;
         });
-    };
-
-    ObjectAPI.prototype.delete = function () {
-        throw new Error('Delete not implemented');
-    };
-
-    ObjectAPI.prototype.isPersistable = function (domainObject) {
-        let provider = this.getProvider(domainObject.identifier);
-
-        return provider !== undefined
-            && provider.create !== undefined
-            && provider.update !== undefined;
-    };
-
-    /**
-     * Save this domain object in its current state. EXPERIMENTAL
-     *
-     * @private
-     * @memberof module:openmct.ObjectAPI#
-     * @param {module:openmct.DomainObject} domainObject the domain object to
-     *        save
-     * @returns {Promise} a promise which will resolve when the domain object
-     *          has been saved, or be rejected if it cannot be saved
-     */
-    ObjectAPI.prototype.save = function (domainObject) {
-        let provider = this.getProvider(domainObject.identifier);
-        let savedResolve;
-        let result;
-
-        if (!this.isPersistable(domainObject)) {
-            result = Promise.reject('Object provider does not support saving');
-        } else if (hasAlreadyBeenPersisted(domainObject)) {
-            result = Promise.resolve(true);
-        } else {
-            const persistedTime = Date.now();
-            if (domainObject.persisted === undefined) {
-                result = new Promise((resolve) => {
-                    savedResolve = resolve;
-                });
-                domainObject.persisted = persistedTime;
-                provider.create(domainObject).then((response) => {
-                    this.mutate(domainObject, 'persisted', persistedTime);
-                    savedResolve(response);
-                });
-            } else {
-                domainObject.persisted = persistedTime;
-                this.mutate(domainObject, 'persisted', persistedTime);
-                result = provider.update(domainObject);
-            }
-        }
 
         return result;
-    };
+    });
+};
 
-    /**
+/**
-     * Add a root-level object.
+ * Will fetch object for the given identifier, returning a version of the object that will automatically keep
-     * @param {module:openmct.ObjectAPI~Identifier|function} an array of
+ * itself updated as it is mutated. Before using this function, you should ask yourself whether you really need it.
-     *        identifiers for root level objects, or a function that returns a
+ * The platform will provide mutable objects to views automatically if the underlying object can be mutated. The
-     *        promise for an identifier or an array of root level objects.
+ * platform will manage the lifecycle of any mutable objects that it provides. If you use `getMutable` you are
-     * @method addRoot
+ * committing to managing that lifecycle yourself. `.destroy` should be called when the object is no longer needed.
-     * @memberof module:openmct.ObjectAPI#
+ *
-     */
+ * @memberof {module:openmct.ObjectAPI#}
-    ObjectAPI.prototype.addRoot = function (key) {
+ * @returns {Promise.<MutableDomainObject>} a promise that will resolve with a MutableDomainObject if
-        this.rootRegistry.addRoot(key);
+ * the object can be mutated.
-    };
+ */
-
+ObjectAPI.prototype.getMutable = function (identifier) {
-    /**
+    if (!this.supportsMutation(identifier)) {
-     * Modify a domain object.
+        throw new Error(`Object "${this.makeKeyString(identifier)}" does not support mutation.`);
-     * @param {module:openmct.DomainObject} object the object to mutate
-     * @param {string} path the property to modify
-     * @param {*} value the new value for this property
-     * @method mutate
-     * @memberof module:openmct.ObjectAPI#
-     */
-    ObjectAPI.prototype.mutate = function (domainObject, path, value) {
-        const mutableObject =
-            new MutableObject(this.eventEmitter, domainObject);
-
-        return mutableObject.set(path, value);
-    };
-
-    /**
-     * Observe changes to a domain object.
-     * @param {module:openmct.DomainObject} object the object to observe
-     * @param {string} path the property to observe
-     * @param {Function} callback a callback to invoke when new values for
-     *        this property are observed
-     * @method observe
-     * @memberof module:openmct.ObjectAPI#
-     */
-    ObjectAPI.prototype.observe = function (domainObject, path, callback) {
-        const mutableObject =
-            new MutableObject(this.eventEmitter, domainObject);
-        mutableObject.on(path, callback);
-
-        return mutableObject.stopListening.bind(mutableObject);
-    };
-
-    /**
-     * @param {module:openmct.ObjectAPI~Identifier} identifier
-     * @returns {string} A string representation of the given identifier, including namespace and key
-     */
-    ObjectAPI.prototype.makeKeyString = function (identifier) {
-        return utils.makeKeyString(identifier);
-    };
-
-    /**
-     * Given any number of identifiers, will return true if they are all equal, otherwise false.
-     * @param {module:openmct.ObjectAPI~Identifier[]} identifiers
-     */
-    ObjectAPI.prototype.areIdsEqual = function (...identifiers) {
-        return identifiers.map(utils.parseKeyString)
-            .every(identifier => {
-                return identifier === identifiers[0]
-                    || (identifier.namespace === identifiers[0].namespace
-                        && identifier.key === identifiers[0].key);
-            });
-    };
-
-    ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
-        return this.get(identifier).then((domainObject) => {
-            path.push(domainObject);
-            let location = domainObject.location;
-
-            if (location) {
-                return this.getOriginalPath(utils.parseKeyString(location), path);
-            } else {
-                return path;
-            }
-        });
-    };
-
-    /**
-     * Register an object interceptor that transforms a domain object requested via module:openmct.ObjectAPI.get
-     * The domain object will be transformed after it is retrieved from the persistence store
-     * The domain object will be transformed only if the interceptor is applicable to that domain object as defined by the InterceptorDef
-     *
-     * @param {module:openmct.InterceptorDef} interceptorDef the interceptor definition to add
-     * @method addGetInterceptor
-     * @memberof module:openmct.InterceptorRegistry#
-     */
-    ObjectAPI.prototype.addGetInterceptor = function (interceptorDef) {
-        this.interceptorRegistry.addInterceptor(interceptorDef);
-    };
-
-    /**
-     * Retrieve the interceptors for a given domain object.
-     * @private
-     */
-    ObjectAPI.prototype.listGetInterceptors = function (identifier, object) {
-        return this.interceptorRegistry.getInterceptors(identifier, object);
-    };
-
-    /**
-     * Uniquely identifies a domain object.
-     *
-     * @typedef Identifier
-     * @memberof module:openmct.ObjectAPI~
-     * @property {string} namespace the namespace to/from which this domain
-     *           object should be loaded/stored.
-     * @property {string} key a unique identifier for the domain object
-     *           within that namespace
-     */
-
-    /**
-     * A domain object is an entity of relevance to a user's workflow, that
-     * should appear as a distinct and meaningful object within the user
-     * interface. Examples of domain objects are folders, telemetry sensors,
-     * and so forth.
-     *
-     * A few common properties are defined for domain objects. Beyond these,
-     * individual types of domain objects may add more as they see fit.
-     *
-     * @property {module:openmct.ObjectAPI~Identifier} identifier a key/namespace pair which
-     *           uniquely identifies this domain object
-     * @property {string} type the type of domain object
-     * @property {string} name the human-readable name for this domain object
-     * @property {string} [creator] the user name of the creator of this domain
-     *           object
-     * @property {number} [modified] the time, in milliseconds since the UNIX
-     *           epoch, at which this domain object was last modified
-     * @property {module:openmct.ObjectAPI~Identifier[]} [composition] if
-     *           present, this will be used by the default composition provider
-     *           to load domain objects
-     * @typedef DomainObject
-     * @memberof module:openmct
-     */
-
-    function hasAlreadyBeenPersisted(domainObject) {
-        return domainObject.persisted !== undefined
-            && domainObject.persisted === domainObject.modified;
     }
 
-    return ObjectAPI;
+    return this.get(identifier).then((object) => {
-});
+        return this._toMutable(object);
+    });
+};
+
+/**
+ * This function is for cleaning up a mutable domain object when you're done with it.
+ * You only need to use this if you retrieved the object using `getMutable()`. If the object was provided by the
+ * platform (eg. passed into a `view()` function) then the platform is responsible for its lifecycle.
+ * @param {MutableDomainObject} domainObject
+ */
+ObjectAPI.prototype.destroyMutable = function (domainObject) {
+    if (domainObject.isMutable) {
+        return domainObject.$destroy();
+    } else {
+        throw new Error("Attempted to destroy non-mutable domain object");
+    }
+};
+
+ObjectAPI.prototype.delete = function () {
+    throw new Error('Delete not implemented');
+};
+
+ObjectAPI.prototype.isPersistable = function (idOrKeyString) {
+    let identifier = utils.parseKeyString(idOrKeyString);
+    let provider = this.getProvider(identifier);
+
+    return provider !== undefined
+        && provider.create !== undefined
+        && provider.update !== undefined;
+};
+
+/**
+ * Save this domain object in its current state. EXPERIMENTAL
+ *
+ * @private
+ * @memberof module:openmct.ObjectAPI#
+ * @param {module:openmct.DomainObject} domainObject the domain object to
+ *        save
+ * @returns {Promise} a promise which will resolve when the domain object
+ *          has been saved, or be rejected if it cannot be saved
+ */
+ObjectAPI.prototype.save = function (domainObject) {
+    let provider = this.getProvider(domainObject.identifier);
+    let savedResolve;
+    let result;
+
+    if (!this.isPersistable(domainObject.identifier)) {
+        result = Promise.reject('Object provider does not support saving');
+    } else if (hasAlreadyBeenPersisted(domainObject)) {
+        result = Promise.resolve(true);
+    } else {
+        const persistedTime = Date.now();
+        if (domainObject.persisted === undefined) {
+            result = new Promise((resolve) => {
+                savedResolve = resolve;
+            });
+            domainObject.persisted = persistedTime;
+            provider.create(domainObject).then((response) => {
+                this.mutate(domainObject, 'persisted', persistedTime);
+                savedResolve(response);
+            });
+        } else {
+            domainObject.persisted = persistedTime;
+            this.mutate(domainObject, 'persisted', persistedTime);
+            result = provider.update(domainObject);
+        }
+    }
+
+    return result;
+};
+
+/**
+ * Add a root-level object.
+ * @param {module:openmct.ObjectAPI~Identifier|function} an array of
+ *        identifiers for root level objects, or a function that returns a
+ *        promise for an identifier or an array of root level objects.
+ * @method addRoot
+ * @memberof module:openmct.ObjectAPI#
+ */
+ObjectAPI.prototype.addRoot = function (key) {
+    this.rootRegistry.addRoot(key);
+};
+
+/**
+ * Register an object interceptor that transforms a domain object requested via module:openmct.ObjectAPI.get
+ * The domain object will be transformed after it is retrieved from the persistence store
+ * The domain object will be transformed only if the interceptor is applicable to that domain object as defined by the InterceptorDef
+ *
+ * @param {module:openmct.InterceptorDef} interceptorDef the interceptor definition to add
+ * @method addGetInterceptor
+ * @memberof module:openmct.InterceptorRegistry#
+ */
+ObjectAPI.prototype.addGetInterceptor = function (interceptorDef) {
+    this.interceptorRegistry.addInterceptor(interceptorDef);
+};
+
+/**
+ * Retrieve the interceptors for a given domain object.
+ * @private
+ */
+ObjectAPI.prototype.listGetInterceptors = function (identifier, object) {
+    return this.interceptorRegistry.getInterceptors(identifier, object);
+};
+
+/**
+ * Modify a domain object.
+ * @param {module:openmct.DomainObject} object the object to mutate
+ * @param {string} path the property to modify
+ * @param {*} value the new value for this property
+ * @method mutate
+ * @memberof module:openmct.ObjectAPI#
+ */
+ObjectAPI.prototype.mutate = function (domainObject, path, value) {
+    if (!this.supportsMutation(domainObject.identifier)) {
+        throw `Error: Attempted to mutate immutable object ${domainObject.name}`;
+    }
+
+    if (domainObject.isMutable) {
+        domainObject.$set(path, value);
+    } else {
+        //Creating a temporary mutable domain object allows other mutable instances of the
+        //object to be kept in sync.
+        let mutableDomainObject = this._toMutable(domainObject);
+
+        //Mutate original object
+        MutableDomainObject.mutateObject(domainObject, path, value);
+
+        //Mutate temporary mutable object, in the process informing any other mutable instances
+        mutableDomainObject.$set(path, value);
+
+        //Destroy temporary mutable object
+        this.destroyMutable(mutableDomainObject);
+    }
+};
+
+/**
+ * @private
+ */
+ObjectAPI.prototype._toMutable = function (object) {
+    if (object.isMutable) {
+        return object;
+    } else {
+        return MutableDomainObject.createMutable(object, this.eventEmitter);
+    }
+};
+
+/**
+ * @param module:openmct.ObjectAPI~Identifier identifier An object identifier
+ * @returns {boolean} true if the object can be mutated, otherwise returns false
+ */
+ObjectAPI.prototype.supportsMutation = function (identifier) {
+    return this.isPersistable(identifier);
+};
+
+/**
+ * Observe changes to a domain object.
+ * @param {module:openmct.DomainObject} object the object to observe
+ * @param {string} path the property to observe
+ * @param {Function} callback a callback to invoke when new values for
+ *        this property are observed
+ * @method observe
+ * @memberof module:openmct.ObjectAPI#
+ */
+ObjectAPI.prototype.observe = function (domainObject, path, callback) {
+    if (domainObject.isMutable) {
+        return domainObject.$observe(path, callback);
+    } else {
+        let mutable = this._toMutable(domainObject);
+        mutable.$observe(path, callback);
+
+        return () => mutable.$destroy();
+    }
+};
+
+/**
+ * @param {module:openmct.ObjectAPI~Identifier} identifier
+ * @returns {string} A string representation of the given identifier, including namespace and key
+ */
+ObjectAPI.prototype.makeKeyString = function (identifier) {
+    return utils.makeKeyString(identifier);
+};
+
+/**
+ * @param {string} keyString A string representation of the given identifier, that is, a namespace and key separated by a colon.
+ * @returns {module:openmct.ObjectAPI~Identifier} An identifier object
+ */
+ObjectAPI.prototype.parseKeyString = function (keyString) {
+    return utils.parseKeyString(keyString);
+};
+
+/**
+ * Given any number of identifiers, will return true if they are all equal, otherwise false.
+ * @param {module:openmct.ObjectAPI~Identifier[]} identifiers
+ */
+ObjectAPI.prototype.areIdsEqual = function (...identifiers) {
+    return identifiers.map(utils.parseKeyString)
+        .every(identifier => {
+            return identifier === identifiers[0]
+                || (identifier.namespace === identifiers[0].namespace
+                    && identifier.key === identifiers[0].key);
+        });
+};
+
+ObjectAPI.prototype.getOriginalPath = function (identifier, path = []) {
+    return this.get(identifier).then((domainObject) => {
+        path.push(domainObject);
+        let location = domainObject.location;
+
+        if (location) {
+            return this.getOriginalPath(utils.parseKeyString(location), path);
+        } else {
+            return path;
+        }
+    });
+};
+
+/**
+ * Uniquely identifies a domain object.
+ *
+ * @typedef Identifier
+ * @memberof module:openmct.ObjectAPI~
+ * @property {string} namespace the namespace to/from which this domain
+ *           object should be loaded/stored.
+ * @property {string} key a unique identifier for the domain object
+ *           within that namespace
+ */
+
+/**
+ * A domain object is an entity of relevance to a user's workflow, that
+ * should appear as a distinct and meaningful object within the user
+ * interface. Examples of domain objects are folders, telemetry sensors,
+ * and so forth.
+ *
+ * A few common properties are defined for domain objects. Beyond these,
+ * individual types of domain objects may add more as they see fit.
+ *
+ * @property {module:openmct.ObjectAPI~Identifier} identifier a key/namespace pair which
+ *           uniquely identifies this domain object
+ * @property {string} type the type of domain object
+ * @property {string} name the human-readable name for this domain object
+ * @property {string} [creator] the user name of the creator of this domain
+ *           object
+ * @property {number} [modified] the time, in milliseconds since the UNIX
+ *           epoch, at which this domain object was last modified
+ * @property {module:openmct.ObjectAPI~Identifier[]} [composition] if
+ *           present, this will be used by the default composition provider
+ *           to load domain objects
+ * @typedef DomainObject
+ * @memberof module:openmct
+ */
+
+function hasAlreadyBeenPersisted(domainObject) {
+    return domainObject.persisted !== undefined
+        && domainObject.persisted === domainObject.modified;
+}
+
+export default ObjectAPI;

src/api/objects/ObjectAPISpec.js

@@ -2,12 +2,16 @@ import ObjectAPI from './ObjectAPI.js';
 
 describe("The Object API", () => {
     let objectAPI;
+    let typeRegistry;
     let mockDomainObject;
     const TEST_NAMESPACE = "test-namespace";
     const FIFTEEN_MINUTES = 15 * 60 * 1000;
 
     beforeEach(() => {
-        objectAPI = new ObjectAPI();
+        typeRegistry = jasmine.createSpyObj('typeRegistry', [
+            'get'
+        ]);
+        objectAPI = new ObjectAPI(typeRegistry);
         mockDomainObject = {
             identifier: {
                 namespace: TEST_NAMESPACE,
@@ -33,6 +37,7 @@ describe("The Object API", () => {
                     "update"
                 ]);
                 mockProvider.create.and.returnValue(Promise.resolve(true));
+                mockProvider.update.and.returnValue(Promise.resolve(true));
                 objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
             });
             it("Calls 'create' on provider if object is new", () => {
@@ -128,4 +133,131 @@ describe("The Object API", () => {
             });
         });
     });
+
+    describe("the mutation API", () => {
+        let testObject;
+        let mutable;
+        let mockProvider;
+
+        beforeEach(function () {
+            objectAPI = new ObjectAPI(typeRegistry);
+            testObject = {
+                identifier: {
+                    namespace: TEST_NAMESPACE,
+                    key: 'test-key'
+                },
+                name: 'test object',
+                otherAttribute: 'other-attribute-value',
+                objectAttribute: {
+                    embeddedObject: {
+                        embeddedKey: 'embedded-value'
+                    }
+                }
+            };
+            mockProvider = jasmine.createSpyObj("mock provider", [
+                "get",
+                "create",
+                "update"
+            ]);
+            mockProvider.get.and.returnValue(Promise.resolve(testObject));
+            objectAPI.addProvider(TEST_NAMESPACE, mockProvider);
+
+            return objectAPI.getMutable(testObject.identifier)
+                .then(object => {
+                    mutable = object;
+
+                    return mutable;
+                });
+        });
+
+        afterEach(() => {
+            mutable.$destroy();
+        });
+
+        it('mutates the original object', () => {
+            const MUTATED_NAME = 'mutated name';
+            objectAPI.mutate(testObject, 'name', MUTATED_NAME);
+            expect(testObject.name).toBe(MUTATED_NAME);
+        });
+
+        describe ('uses a MutableDomainObject', () => {
+            it('and retains properties of original object ', function () {
+                expect(hasOwnProperty(mutable, 'identifier')).toBe(true);
+                expect(hasOwnProperty(mutable, 'otherAttribute')).toBe(true);
+                expect(mutable.identifier).toEqual(testObject.identifier);
+                expect(mutable.otherAttribute).toEqual(testObject.otherAttribute);
+            });
+
+            it('that is identical to original object when serialized', function () {
+                expect(JSON.stringify(mutable)).toEqual(JSON.stringify(testObject));
+            });
+        });
+
+        describe('uses events', function () {
+            let testObjectDuplicate;
+            let mutableSecondInstance;
+
+            beforeEach(function () {
+                // Duplicate object to guarantee we are not sharing object instance, which would invalidate test
+                testObjectDuplicate = JSON.parse(JSON.stringify(testObject));
+                mutableSecondInstance = objectAPI._toMutable(testObjectDuplicate);
+            });
+
+            afterEach(() => {
+                mutableSecondInstance.$destroy();
+            });
+
+            it('to stay synchronized when mutated', function () {
+                objectAPI.mutate(mutable, 'otherAttribute', 'new-attribute-value');
+                expect(mutableSecondInstance.otherAttribute).toBe('new-attribute-value');
+            });
+
+            it('to indicate when a property changes', function () {
+                let mutationCallback = jasmine.createSpy('mutation-callback');
+                let unlisten;
+
+                return new Promise(function (resolve) {
+                    mutationCallback.and.callFake(resolve);
+                    unlisten = objectAPI.observe(mutableSecondInstance, 'otherAttribute', mutationCallback);
+                    objectAPI.mutate(mutable, 'otherAttribute', 'some-new-value');
+                }).then(function () {
+                    expect(mutationCallback).toHaveBeenCalledWith('some-new-value');
+                    unlisten();
+                });
+            });
+
+            it('to indicate when a child property has changed', function () {
+                let embeddedKeyCallback = jasmine.createSpy('embeddedKeyCallback');
+                let embeddedObjectCallback = jasmine.createSpy('embeddedObjectCallback');
+                let objectAttributeCallback = jasmine.createSpy('objectAttribute');
+                let listeners = [];
+
+                return new Promise(function (resolve) {
+                    objectAttributeCallback.and.callFake(resolve);
+
+                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute.embeddedObject.embeddedKey', embeddedKeyCallback));
+                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute.embeddedObject', embeddedObjectCallback));
+                    listeners.push(objectAPI.observe(mutableSecondInstance, 'objectAttribute', objectAttributeCallback));
+
+                    objectAPI.mutate(mutable, 'objectAttribute.embeddedObject.embeddedKey', 'updated-embedded-value');
+                }).then(function () {
+                    expect(embeddedKeyCallback).toHaveBeenCalledWith('updated-embedded-value');
+                    expect(embeddedObjectCallback).toHaveBeenCalledWith({
+                        embeddedKey: 'updated-embedded-value'
+                    });
+                    expect(objectAttributeCallback).toHaveBeenCalledWith({
+                        embeddedObject: {
+                            embeddedKey: 'updated-embedded-value'
+                        }
+                    });
+
+                    listeners.forEach(listener => listener());
+                });
+            });
+        });
+    });
 });
+
+function hasOwnProperty(object, property) {
+    return Object.prototype.hasOwnProperty.call(object, property);
+}

src/plugins/LADTable/LADTableViewProvider.js

@@ -43,12 +43,16 @@ export default function LADTableViewProvider(openmct) {
                         components: {
                             LadTableComponent: LadTable
                         },
-                        provide: {
+                        data: () => {
-                            openmct,
+                            return {
-                            domainObject,
+                                domainObject,
-                            objectPath
+                                objectPath
+                            };
                         },
-                        template: '<lad-table-component></lad-table-component>'
+                        provide: {
+                            openmct
+                        },
+                        template: '<lad-table-component :domain-object="domainObject" :object-path="objectPath"></lad-table-component>'
                     });
                 },
                 destroy: function (element) {

src/plugins/LADTable/components/LADRow.vue

@@ -26,7 +26,7 @@
     class="js-lad-table__body__row"
     @contextmenu.prevent="showContextMenu"
 >
-    <td class="js-first-data">{{ name }}</td>
+    <td class="js-first-data">{{ domainObject.name }}</td>
     <td class="js-second-data">{{ formattedTimestamp }}</td>
     <td
         class="js-third-data"
@@ -50,12 +50,16 @@ const CONTEXT_MENU_ACTIONS = [
 ];
 
 export default {
-    inject: ['openmct', 'objectPath'],
+    inject: ['openmct'],
     props: {
         domainObject: {
             type: Object,
             required: true
         },
+        objectPath: {
+            type: Array,
+            required: true
+        },
         hasUnits: {
             type: Boolean,
             requred: true
@@ -66,7 +70,6 @@ export default {
         currentObjectPath.unshift(this.domainObject);
 
         return {
-            name: this.domainObject.name,
             timestamp: undefined,
             value: '---',
             valueClass: '',
@@ -89,14 +92,6 @@ export default {
             .telemetry
             .limitEvaluator(this.domainObject);
 
-        this.stopWatchingMutation = this.openmct
-            .objects
-            .observe(
-                this.domainObject,
-                '*',
-                this.updateName
-            );
-
         this.openmct.time.on('timeSystem', this.updateTimeSystem);
         this.openmct.time.on('bounds', this.updateBounds);
 
@@ -119,7 +114,6 @@ export default {
         }
     },
     destroyed() {
-        this.stopWatchingMutation();
         this.unsubscribe();
         this.openmct.time.off('timeSystem', this.updateTimeSystem);
         this.openmct.time.off('bounds', this.updateBounds);
@@ -160,9 +154,6 @@ export default {
                 })
                 .then((array) => this.updateValues(array[array.length - 1]));
         },
-        updateName(name) {
-            this.name = name;
-        },
         updateBounds(bounds, isTick) {
             this.bounds = bounds;
             if (!isTick) {

src/plugins/LADTable/components/LADTable.vue

@@ -36,6 +36,7 @@
                 v-for="item in items"
                 :key="item.key"
                 :domain-object="item.domainObject"
+                :object-path="objectPath"
                 :has-units="hasUnits"
             />
         </tbody>
@@ -47,10 +48,20 @@
 import LadRow from './LADRow.vue';
 
 export default {
-    inject: ['openmct', 'domainObject', 'objectPath'],
+    inject: ['openmct'],
     components: {
         LadRow
     },
+    props: {
+        domainObject: {
+            type: Object,
+            required: true
+        },
+        objectPath: {
+            type: Array,
+            required: true
+        }
+    },
     data() {
         return {
             items: []

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -152,10 +152,7 @@ export default {
         }
     },
     data() {
-        let domainObject = JSON.parse(JSON.stringify(this.domainObject));
-
         return {
-            internalDomainObject: domainObject,
             initSelectIndex: undefined,
             selection: [],
             showGrid: true
@@ -163,10 +160,10 @@ export default {
     },
     computed: {
         gridSize() {
-            return this.internalDomainObject.configuration.layoutGrid;
+            return this.domainObject.configuration.layoutGrid;
         },
         layoutItems() {
-            return this.internalDomainObject.configuration.items;
+            return this.domainObject.configuration.items;
         },
         selectedLayoutItems() {
             return this.layoutItems.filter(item => {
@@ -174,7 +171,7 @@ export default {
             });
         },
         layoutDimensions() {
-            return this.internalDomainObject.configuration.layoutDimensions;
+            return this.domainObject.configuration.layoutDimensions;
         },
         shouldDisplayLayoutDimensions() {
             return this.layoutDimensions
@@ -206,12 +203,9 @@ export default {
         }
     },
     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 = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addChild);
         this.composition.on('remove', this.removeChild);
         this.composition.load();
@@ -220,7 +214,6 @@ export default {
         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) {
@@ -347,7 +340,7 @@ export default {
             this.startingMinY2 = undefined;
         },
         mutate(path, value) {
-            this.openmct.objects.mutate(this.internalDomainObject, path, value);
+            this.openmct.objects.mutate(this.domainObject, path, value);
         },
         handleDrop($event) {
             if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -387,11 +380,11 @@ export default {
             }
         },
         containsObject(identifier) {
-            return _.get(this.internalDomainObject, 'composition')
+            return _.get(this.domainObject, 'composition')
                 .some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
         },
         handleDragOver($event) {
-            if (this.internalDomainObject.locked) {
+            if (this.domainObject.locked) {
                 return;
             }
 
@@ -420,7 +413,7 @@ export default {
             item.id = uuid();
             this.trackItem(item);
             this.layoutItems.push(item);
-            this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
+            this.openmct.objects.mutate(this.domainObject, "configuration.items", this.layoutItems);
             this.initSelectIndex = this.layoutItems.length - 1;
         },
         trackItem(item) {
@@ -477,7 +470,7 @@ export default {
             }
         },
         removeFromComposition(keyString) {
-            let composition = _.get(this.internalDomainObject, 'composition');
+            let composition = _.get(this.domainObject, 'composition');
             composition = composition.filter(identifier => {
                 return this.openmct.objects.makeKeyString(identifier) !== keyString;
             });
@@ -629,10 +622,10 @@ export default {
         createNewDomainObject(domainObject, composition, viewType, nameExtension, model) {
             let identifier = {
                 key: uuid(),
-                namespace: this.internalDomainObject.identifier.namespace
+                namespace: this.domainObject.identifier.namespace
             };
             let type = this.openmct.types.get(viewType);
-            let parentKeyString = this.openmct.objects.makeKeyString(this.internalDomainObject.identifier);
+            let parentKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
             let objectName = nameExtension ? `${domainObject.name}-${nameExtension}` : domainObject.name;
             let object = {};
 
@@ -689,7 +682,7 @@ export default {
             });
         },
         duplicateItem(selectedItems) {
-            let objectStyles = this.internalDomainObject.configuration.objectStyles || {};
+            let objectStyles = this.domainObject.configuration.objectStyles || {};
             let selectItemsArray = [];
             let newDomainObjectsArray = [];
 
@@ -728,8 +721,8 @@ export default {
             });
 
             this.$nextTick(() => {
-                this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
+                this.openmct.objects.mutate(this.domainObject, "configuration.items", this.layoutItems);
-                this.openmct.objects.mutate(this.internalDomainObject, "configuration.objectStyles", objectStyles);
+                this.openmct.objects.mutate(this.domainObject, "configuration.objectStyles", objectStyles);
                 this.$el.click(); //clear selection;
 
                 newDomainObjectsArray.forEach(domainObject => {
@@ -768,13 +761,13 @@ export default {
             };
             this.createNewDomainObject(mockDomainObject, overlayPlotIdentifiers, viewType).then((newDomainObject) => {
                 let newDomainObjectKeyString = this.openmct.objects.makeKeyString(newDomainObject.identifier);
-                let internalDomainObjectKeyString = this.openmct.objects.makeKeyString(this.internalDomainObject.identifier);
+                let domainObjectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
                 this.composition.add(newDomainObject);
                 this.addItem('subobject-view', newDomainObject, position);
 
                 overlayPlots.forEach(overlayPlot => {
-                    if (overlayPlot.location === internalDomainObjectKeyString) {
+                    if (overlayPlot.location === domainObjectKeyString) {
                         this.openmct.objects.mutate(overlayPlot, 'location', newDomainObjectKeyString);
                     }
                 });

src/plugins/displayLayout/components/SubobjectView.vue

@@ -129,13 +129,22 @@ export default {
         }
     },
     mounted() {
-        this.openmct.objects.get(this.item.identifier)
+        if (this.openmct.objects.supportsMutation(this.item.identifier)) {
-            .then(this.setObject);
+            this.openmct.objects.getMutable(this.item.identifier)
+                .then(this.setObject);
+        } else {
+            this.openmct.objects.get(this.item.identifier)
+                .then(this.setObject);
+        }
     },
-    destroyed() {
+    beforeDestroy() {
         if (this.removeSelectable) {
             this.removeSelectable();
         }
+
+        if (this.domainObject.isMutable) {
+            this.openmct.objects.destroyMutable(this.domainObject);
+        }
     },
     methods: {
         setObject(domainObject) {

src/plugins/displayLayout/components/TelemetryView.vue

@@ -212,14 +212,20 @@ export default {
         }
     },
     mounted() {
-        this.openmct.objects.get(this.item.identifier)
+        if (this.openmct.objects.supportsMutation(this.item.identifier)) {
-            .then(this.setObject);
+            this.openmct.objects.getMutable(this.item.identifier)
+                .then(this.setObject);
+        } else {
+            this.openmct.objects.get(this.item.identifier)
+                .then(this.setObject);
+        }
+
         this.openmct.time.on("bounds", this.refreshData);
 
         this.status = this.openmct.status.get(this.item.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
     },
-    destroyed() {
+    beforeDestroy() {
         this.removeSubscription();
         this.removeStatusListener();
 
@@ -228,6 +234,10 @@ export default {
         }
 
         this.openmct.time.off("bounds", this.refreshData);
+
+        if (this.domainObject.isMutable) {
+            this.openmct.objects.destroyMutable(this.domainObject);
+        }
     },
     methods: {
         formattedValueForCopy() {

src/plugins/duplicate/pluginSpec.js

@@ -57,6 +57,7 @@ describe("The Duplicate Action plugin", () => {
             overwrite: {
                 folder: {
                     name: "Parent Folder",
+                    type: "folder",
                     composition: [childObject.identifier]
                 }
             }
@@ -104,6 +105,7 @@ describe("The Duplicate Action plugin", () => {
 
         // already installed by default, but never hurts, just adds to context menu
         openmct.install(DuplicateActionPlugin());
+        openmct.types.addType('folder', {creatable: true});
 
         openmct.on('start', done);
         openmct.startHeadless();

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

@@ -113,6 +113,13 @@ let openmct;
 describe('Notebook Entries:', () => {
     beforeEach(done => {
         openmct = createOpenMct();
+        openmct.types.addType('notebook', {
+            creatable: true
+        });
+        openmct.objects.addProvider('', jasmine.createSpyObj('mockNotebookProvider', [
+            'create',
+            'update'
+        ]));
         window.localStorage.setItem('notebook-storage', null);
 
         done();

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

@@ -62,7 +62,10 @@ describe('Notebook Storage:', () => {
     beforeEach((done) => {
         openmct = createOpenMct();
         window.localStorage.setItem('notebook-storage', null);
-
+        openmct.objects.addProvider('', jasmine.createSpyObj('mockNotebookProvider', [
+            'create',
+            'update'
+        ]));
         done();
     });
 

src/plugins/persistence/couch/pluginSpec.js

@@ -39,10 +39,12 @@ describe('the plugin', () => {
             identifier: {
                 namespace: 'mct',
                 key: 'some-value'
-            }
+            },
+            type: 'mock-type'
         };
         openmct = createOpenMct(false);
         openmct.install(new CouchPlugin(testPath));
+        openmct.types.addType('mock-type', {creatable: true});
 
         element = document.createElement('div');
         child = document.createElement('div');

src/plugins/tabs/components/tabs.vue

@@ -55,7 +55,7 @@
         <object-view
             v-if="internalDomainObject.keep_alive ? currentTab : isCurrent(tab)"
             class="c-tabs-view__object"
-            :object="tab.domainObject"
+            :default-object="tab.domainObject"
             :object-path="tab.objectPath"
         />
     </div>

src/plugins/telemetryTable/pluginSpec.js

@@ -68,6 +68,10 @@ describe("the plugin", () => {
             end: 4
         });
 
+        openmct.types.addType('test-object', {
+            creatable: true
+        });
+
         spyOnBuiltins(['requestAnimationFrame']);
         window.requestAnimationFrame.and.callFake((callBack) => {
             callBack();

src/selection/Selection.js

@@ -241,11 +241,8 @@ define(
             element.addEventListener('click', capture, true);
             element.addEventListener('click', selectCapture);
 
-            let unlisten = undefined;
             if (context.item) {
-                unlisten = this.openmct.objects.observe(context.item, "*", function (newItem) {
+                context.item = this.openmct.objects._toMutable(context.item);
-                    context.item = newItem;
-                });
             }
 
             if (select) {
@@ -256,14 +253,14 @@ define(
                 }
             }
 
-            return function () {
+            return (function () {
                 element.removeEventListener('click', capture, true);
                 element.removeEventListener('click', selectCapture);
 
-                if (unlisten !== undefined) {
+                if (context.item !== undefined && context.item.isMutable) {
-                    unlisten();
+                    this.openmct.objects.destroyMutable(context.item);
                 }
-            };
+            }).bind(this);
         };
 
         return Selection;

src/ui/components/ObjectFrame.vue

@@ -88,7 +88,6 @@
     <object-view
         ref="objectView"
         class="c-so-view__object-view"
-        :object="domainObject"
         :show-edit-view="showEditView"
         :object-path="objectPath"
         :layout-font-size="layoutFontSize"
@@ -161,6 +160,7 @@ export default {
     mounted() {
         this.status = this.openmct.status.get(this.domainObject.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
+        this.$refs.objectView.show(this.domainObject, undefined, false, this.objectPath);
     },
     beforeDestroy() {
         this.removeStatusListener();

src/ui/components/ObjectLabel.vue

@@ -15,7 +15,7 @@
         ></span>
     </div>
     <div class="c-tree__item__name c-object-label__name">
-        {{ observedObject.name }}
+        {{ domainObject.name }}
     </div>
 </a>
 </template>
@@ -45,13 +45,12 @@ export default {
     },
     data() {
         return {
-            observedObject: this.domainObject,
             status: ''
         };
     },
     computed: {
         typeClass() {
-            let type = this.openmct.types.get(this.observedObject.type);
+            let type = this.openmct.types.get(this.domainObject.type);
             if (!type) {
                 return 'icon-object-unknown';
             }
@@ -63,15 +62,8 @@ export default {
         }
     },
     mounted() {
-        if (this.observedObject) {
+        this.removeStatusListener = this.openmct.status.observe(this.domainObject.identifier, this.setStatus);
-            let removeListener = this.openmct.objects.observe(this.observedObject, '*', (newObject) => {
+        this.status = this.openmct.status.get(this.domainObject.identifier);
-                this.observedObject = newObject;
-            });
-            this.$once('hook:destroyed', removeListener);
-        }
-
-        this.removeStatusListener = this.openmct.status.observe(this.observedObject.identifier, this.setStatus);
-        this.status = this.openmct.status.get(this.observedObject.identifier);
         this.previewAction = new PreviewAction(this.openmct);
     },
     destroyed() {
@@ -101,7 +93,7 @@ export default {
              * that point. If dragged object can be composed by navigated object, then indicate with presence of
              * 'composable-domain-object' in data transfer
              */
-            if (this.openmct.composition.checkPolicy(navigatedObject, this.observedObject)) {
+            if (this.openmct.composition.checkPolicy(navigatedObject, this.domainObject)) {
                 event.dataTransfer.setData("openmct/composable-domain-object", JSON.stringify(this.domainObject));
             }
 

src/ui/components/ObjectView.vue

@@ -10,11 +10,11 @@ import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants";
 export default {
     inject: ["openmct"],
     props: {
-        object: {
+        showEditView: Boolean,
+        defaultObject: {
             type: Object,
             default: undefined
         },
-        showEditView: Boolean,
         objectPath: {
             type: Array,
             default: () => {
@@ -32,12 +32,12 @@ export default {
     },
     data() {
         return {
-            currentObject: this.object
+            domainObject: this.defaultObject
         };
     },
     computed: {
         objectFontStyle() {
-            return this.currentObject && this.currentObject.configuration && this.currentObject.configuration.fontStyle;
+            return this.domainObject && this.domainObject.configuration && this.domainObject.configuration.fontStyle;
         },
         fontSize() {
             return this.objectFontStyle ? this.objectFontStyle.fontSize : this.layoutFontSize;
@@ -46,22 +46,12 @@ export default {
             return this.objectFontStyle ? this.objectFontStyle.font : this.layoutFont;
         }
     },
-    watch: {
-        object(newObject, oldObject) {
-            this.currentObject = newObject;
-            this.debounceUpdateView();
-        }
-    },
     destroyed() {
         this.clear();
         if (this.releaseEditModeHandler) {
             this.releaseEditModeHandler();
         }
 
-        if (this.unlisten) {
-            this.unlisten();
-        }
-
         if (this.stopListeningStyles) {
             this.stopListeningStyles();
         }
@@ -92,7 +82,7 @@ export default {
             capture: true
         });
         this.$el.addEventListener('drop', this.addObjectToParent);
-        if (this.currentObject) {
+        if (this.domainObject) {
             //This is to apply styles to subobjects in a layout
             this.initObjectStyles();
         }
@@ -135,7 +125,7 @@ export default {
         invokeEditModeHandler(editMode) {
             let edit;
 
-            if (this.currentObject.locked) {
+            if (this.domainObject.locked) {
                 edit = false;
             } else {
                 edit = editMode;
@@ -175,13 +165,13 @@ export default {
         },
         updateView(immediatelySelect) {
             this.clear();
-            if (!this.currentObject) {
+            if (!this.domainObject) {
                 return;
             }
 
-            this.composition = this.openmct.composition.get(this.currentObject);
+            this.composition = this.openmct.composition.get(this.domainObject);
+
             if (this.composition) {
-                this.composition._synchronize();
                 this.loadComposition();
             }
 
@@ -197,15 +187,15 @@ export default {
 
             if (provider.edit && this.showEditView) {
                 if (this.openmct.editor.isEditing()) {
-                    this.currentView = provider.edit(this.currentObject, true, objectPath);
+                    this.currentView = provider.edit(this.domainObject, true, objectPath);
                 } else {
-                    this.currentView = provider.view(this.currentObject, objectPath);
+                    this.currentView = provider.view(this.domainObject, objectPath);
                 }
 
                 this.openmct.editor.on('isEditing', this.toggleEditView);
                 this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView);
             } else {
-                this.currentView = provider.view(this.currentObject, objectPath);
+                this.currentView = provider.view(this.domainObject, objectPath);
 
                 if (this.currentView.onEditModeChange) {
                     this.openmct.editor.on('isEditing', this.invokeEditModeHandler);
@@ -247,16 +237,12 @@ export default {
                 this.composition._destroy();
             }
 
-            this.currentObject = object;
+            this.domainObject = object;
 
             if (currentObjectPath) {
                 this.currentObjectPath = currentObjectPath;
             }
 
-            this.unlisten = this.openmct.objects.observe(this.currentObject, '*', (mutatedObject) => {
-                this.currentObject = mutatedObject;
-            });
-
             this.viewKey = viewKey;
 
             this.updateView(immediatelySelect);
@@ -265,16 +251,16 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
+                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
             } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.currentObject.configuration && this.currentObject.configuration.objectStyles);
+                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
             }
 
             if (this.stopListeningStyles) {
                 this.stopListeningStyles();
             }
 
-            this.stopListeningStyles = this.openmct.objects.observe(this.currentObject, 'configuration.objectStyles', (newObjectStyle) => {
+            this.stopListeningStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
                 //Updating styles in the inspector view will trigger this so that the changes are reflected immediately
                 this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
             });
@@ -282,7 +268,7 @@ export default {
             this.setFontSize(this.fontSize);
             this.setFont(this.font);
 
-            this.stopListeningFontStyles = this.openmct.objects.observe(this.currentObject, 'configuration.fontStyle', (newFontStyle) => {
+            this.stopListeningFontStyles = this.openmct.objects.observe(this.domainObject, 'configuration.fontStyle', (newFontStyle) => {
                 this.setFontSize(newFontStyle.fontSize);
                 this.setFont(newFontStyle.font);
             });
@@ -294,7 +280,7 @@ export default {
             if (this.currentView && this.currentView.getSelectionContext) {
                 return this.currentView.getSelectionContext();
             } else {
-                return { item: this.currentObject };
+                return { item: this.domainObject };
             }
         },
         onDragOver(event) {
@@ -321,7 +307,7 @@ export default {
             let provider = this.openmct.objectViews.getByProviderKey(this.viewKey);
 
             if (!provider) {
-                provider = this.openmct.objectViews.get(this.currentObject)[0];
+                provider = this.openmct.objectViews.get(this.domainObject)[0];
                 if (!provider) {
                     return;
                 }
@@ -333,7 +319,7 @@ export default {
             let provider = this.getViewProvider();
             if (provider
                 && provider.canEdit
-                && provider.canEdit(this.currentObject)
+                && provider.canEdit(this.domainObject)
                 && this.isEditingAllowed()
                 && !this.openmct.editor.isEditing()) {
                 this.openmct.editor.edit();
@@ -350,7 +336,7 @@ export default {
         clearData(domainObject) {
             if (domainObject) {
                 let clearKeyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-                let currentObjectKeyString = this.openmct.objects.makeKeyString(this.currentObject.identifier);
+                let currentObjectKeyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
                 if (clearKeyString === currentObjectKeyString) {
                     if (this.currentView.onClearData) {
@@ -364,11 +350,11 @@ export default {
             }
         },
         isEditingAllowed() {
-            let browseObject = this.openmct.layout.$refs.browseObject.currentObject;
+            let browseObject = this.openmct.layout.$refs.browseObject.domainObject;
             let objectPath = this.currentObjectPath || this.objectPath;
             let parentObject = objectPath[1];
 
-            return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
+            return [browseObject, parentObject, this.domainObject].every(object => object && !object.locked);
         },
         setFontSize(newSize) {
             let elemToStyle = this.getStyleReceiver();

src/ui/inspector/Elements.vue

@@ -82,10 +82,6 @@ export default {
         this.openmct.editor.off('isEditing', this.setEditState);
         this.openmct.selection.off('change', this.showSelection);
 
-        if (this.mutationUnobserver) {
-            this.mutationUnobserver();
-        }
-
         if (this.compositionUnlistener) {
             this.compositionUnlistener();
         }
@@ -106,18 +102,11 @@ export default {
             this.listeners = [];
             this.parentObject = selection && selection[0] && selection[0][0].context.item;
 
-            if (this.mutationUnobserver) {
-                this.mutationUnobserver();
-            }
-
             if (this.compositionUnlistener) {
                 this.compositionUnlistener();
             }
 
             if (this.parentObject) {
-                this.mutationUnobserver = this.openmct.objects.observe(this.parentObject, '*', (updatedModel) => {
-                    this.parentObject = updatedModel;
-                });
                 this.composition = this.openmct.composition.get(this.parentObject);
 
                 if (this.composition) {

src/ui/layout/BrowseBar.vue

@@ -211,14 +211,6 @@ export default {
     },
     watch: {
         domainObject() {
-            if (this.mutationObserver) {
-                this.mutationObserver();
-            }
-
-            this.mutationObserver = this.openmct.objects.observe(this.domainObject, '*', (domainObject) => {
-                this.domainObject = domainObject;
-            });
-
             if (this.removeStatusListener) {
                 this.removeStatusListener();
             }

src/ui/router/Browse.js

@@ -10,12 +10,14 @@ define([
         let unobserve = undefined;
         let currentObjectPath;
         let isRoutingInProgress = false;
+        let mutable;
 
         openmct.router.route(/^\/browse\/?$/, navigateToFirstChildOfRoot);
 
         openmct.router.route(/^\/browse\/(.*)$/, (path, results, params) => {
             isRoutingInProgress = true;
             let navigatePath = results[1];
+            clearMutationListeners();
             navigateToPath(navigatePath, params.view);
             onParamsChanged(null, null, params);
         });
@@ -36,10 +38,25 @@ define([
         }
 
         function viewObject(object, viewProvider) {
+            if (mutable) {
+                openmct.objects.destroyMutable(mutable);
+                mutable = undefined;
+            }
+
+            if (openmct.objects.supportsMutation(object)) {
+                mutable = openmct.objects._toMutable(object);
+            }
+
             currentObjectPath = openmct.router.path;
 
-            openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
+            if (mutable !== undefined) {
-            openmct.layout.$refs.browseBar.domainObject = object;
+                openmct.layout.$refs.browseObject.show(mutable, viewProvider.key, true, currentObjectPath);
+                openmct.layout.$refs.browseBar.domainObject = mutable;
+            } else {
+                openmct.layout.$refs.browseObject.show(object, viewProvider.key, true, currentObjectPath);
+                openmct.layout.$refs.browseBar.domainObject = object;
+            }
+
             openmct.layout.$refs.browseBar.viewKey = viewProvider.key;
         }
 
@@ -64,23 +81,14 @@ define([
                     return; // Prevent race.
                 }
 
-                let navigatedObject = objects[objects.length - 1];
+                objects = objects.reverse();
 
-                // FIXME: this is a hack to support create action, intended to
+                openmct.router.path = objects;
-                // expose the current routed path.  We need to rewrite the
+                browseObject = objects[0];
-                // navigation service and router to expose a clear and minimal
-                // API for this.
-                openmct.router.path = objects.reverse();
 
-                unobserve = openmct.objects.observe(openmct.router.path[0], '*', (newObject) => {
+                openmct.layout.$refs.browseBar.domainObject = browseObject;
-                    openmct.router.path[0] = newObject;
-                    browseObject = newObject;
-                });
 
-                openmct.layout.$refs.browseBar.domainObject = navigatedObject;
+                if (!browseObject) {
-                browseObject = navigatedObject;
-
-                if (!navigatedObject) {
                     openmct.layout.$refs.browseObject.clear();
 
                     return;
@@ -92,13 +100,13 @@ define([
 
                 document.title = browseObject.name; //change document title to current object in main view
 
-                if (currentProvider && currentProvider.canView(navigatedObject)) {
+                if (currentProvider && currentProvider.canView(browseObject)) {
-                    viewObject(navigatedObject, currentProvider);
+                    viewObject(browseObject, currentProvider);
 
                     return;
                 }
 
-                let defaultProvider = openmct.objectViews.get(navigatedObject)[0];
+                let defaultProvider = openmct.objectViews.get(browseObject)[0];
                 if (defaultProvider) {
                     openmct.router.updateParams({
                         view: defaultProvider.key
@@ -114,7 +122,13 @@ define([
 
         function pathToObjects(path) {
             return Promise.all(path.map((keyString) => {
-                return openmct.objects.get(keyString);
+                let identifier = openmct.objects.parseKeyString(keyString);
+
+                if (openmct.objects.supportsMutation(identifier)) {
+                    return openmct.objects.getMutable(identifier);
+                } else {
+                    return openmct.objects.get(identifier);
+                }
             }));
         }
 
@@ -132,5 +146,15 @@ define([
                     });
             });
         }
+
+        function clearMutationListeners() {
+            if (openmct.router.path !== undefined) {
+                openmct.router.path.forEach((pathObject) => {
+                    if (pathObject.isMutable) {
+                        openmct.objects.destroyMutable(pathObject);
+                    }
+                });
+            }
+        }
     };
 });