From e05dbadea25aa16486edb05847c4e1bca39ad3bd Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Fri, 9 Nov 2018 11:46:57 -0800
Subject: [PATCH] Ensure labels and tree items stay in sync

---
 src/ui/components/controls/ObjectLabel.vue | 21 +++++++++++++++++----
 src/ui/components/layout/tree-item.vue     | 10 +++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/controls/ObjectLabel.vue b/src/ui/components/controls/ObjectLabel.vue
index 10b48bfce1..866eab6d09 100644
--- a/src/ui/components/controls/ObjectLabel.vue
+++ b/src/ui/components/controls/ObjectLabel.vue
@@ -5,7 +5,7 @@
     :href="objectLink">
     <div class="c-tree__item__type-icon"
         :class="typeClass"></div>
-    <div class="c-tree__item__name">{{ domainObject.name }}</div>
+    <div class="c-tree__item__name">{{ observedObject.name }}</div>
 </a>
 </template>
 
@@ -18,11 +18,24 @@ export default {
     mixins: [ContextMenu, ObjectLink],
     inject: ['openmct'],
     props: {
-        'domainObject': Object,
+        domainObject: Object
+    },
+    data() {
+        return {
+            observedObject: this.domainObject
+        };
+    },
+    mounted() {
+        if (this.observedObject) {
+            let removeListener = this.openmct.objects.observe(this.observedObject, '*', (newObject) => {
+                this.observedObject = newObject;
+            });
+            this.$once('hook:destroyed', removeListener);
+        }
     },
     computed: {
         typeClass() {
-            let type = this.openmct.types.get(this.domainObject.type);
+            let type = this.openmct.types.get(this.observedObject.type);
             if (!type) {
                 return 'icon-object-unknown';
             }
@@ -31,7 +44,7 @@ export default {
     },
     methods: {
         dragStart(event) {
-            event.dataTransfer.setData("domainObject", JSON.stringify(this.domainObject));
+            event.dataTransfer.setData("domainObject", JSON.stringify(this.observedObject));
         }
     }
 }
diff --git a/src/ui/components/layout/tree-item.vue b/src/ui/components/layout/tree-item.vue
index c79e9a5070..f04b9bfbae 100644
--- a/src/ui/components/layout/tree-item.vue
+++ b/src/ui/components/layout/tree-item.vue
@@ -49,8 +49,12 @@
             // TODO: should support drag/drop composition
             // TODO: set isAlias per tree-item
 
-            this.composition = this.openmct.composition.get(this.node.object);
-            if (this.composition) {
+            this.domainObject = this.node.object;
+            let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
+                this.domainObject = newObject;
+            });
+            this.$once('hook:destroyed', removeListener);
+            if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
         },
@@ -68,7 +72,7 @@
                 }
                 this.expanded = !this.expanded;
                 if (!this.loaded && !this.isLoading) {
-                    this.composition = this.openmct.composition.get(this.node.object);
+                    this.composition = this.openmct.composition.get(this.domainObject);
                     this.composition.on('add', this.addChild);
                     this.composition.on('remove', this.removeChild);
                     this.composition.load().then(this.finishLoading());