[Navigation Tree] Only navigation tree changes for Vista (#3893)

* When a mutation is requested, the LegacyObjectAPIInterceptor triggers a second mutatation request - ensure that the model for this 2nd request has some diff from the current model before saving the object.

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

platform/core/src/capabilities/MutationCapability.js

@@ -141,11 +141,17 @@ define(
                 if (mutationResult !== false) {
                     // Copy values if result was a different object
                     // (either our clone or some other new thing)
-                    if (model !== result) {
+                    let modelHasChanged = _.isEqual(model, result) === false;
+                    if (modelHasChanged) {
                         copyValues(model, result);
                     }
 
-                    model.modified = useTimestamp ? timestamp : now();
+                    if (modelHasChanged
+                        || (useTimestamp !== undefined)
+                        || (model.modified === undefined)) {
+                        model.modified = useTimestamp ? timestamp : now();
+                    }
+
                     notifyListeners(model);
                 }
 

src/api/composition/CompositionCollection.js

@@ -215,12 +215,12 @@ define([
      * @memberof {module:openmct.CompositionCollection#}
      * @name load
      */
-    CompositionCollection.prototype.load = function () {
+    CompositionCollection.prototype.load = function (abortSignal) {
         this.cleanUpMutables();
 
         return this.provider.load(this.domainObject)
             .then(function (children) {
-                return Promise.all(children.map((c) => this.publicAPI.objects.get(c)));
+                return Promise.all(children.map((c) => this.publicAPI.objects.get(c, abortSignal)));
             }.bind(this))
             .then(function (childObjects) {
                 childObjects.forEach(c => this.add(c, true));

src/api/objects/ObjectAPI.js

@@ -161,6 +161,7 @@ ObjectAPI.prototype.addProvider = function (namespace, provider) {
 
 ObjectAPI.prototype.get = function (identifier, abortSignal) {
     let keystring = this.makeKeyString(identifier);
+
     if (this.cache[keystring] !== undefined) {
         return this.cache[keystring];
     }
@@ -176,15 +177,16 @@ ObjectAPI.prototype.get = function (identifier, abortSignal) {
         throw new Error('Provider does not support get!');
     }
 
-    let objectPromise = provider.get(identifier, abortSignal);
+    let objectPromise = provider.get(identifier, abortSignal).then(result => {
-    this.cache[keystring] = objectPromise;
-
-    return objectPromise.then(result => {
         delete this.cache[keystring];
         result = this.applyGetInterceptors(identifier, result);
 
         return result;
     });
+
+    this.cache[keystring] = objectPromise;
+
+    return objectPromise;
 };
 
 /**

src/plugins/condition/Condition.js

@@ -272,11 +272,11 @@ export default class Condition extends EventEmitter {
         }
     }
 
-    requestLADConditionResult() {
+    requestLADConditionResult(options) {
         let latestTimestamp;
         let criteriaResults = {};
         const criteriaRequests = this.criteria
-            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects));
+            .map(criterion => criterion.requestLAD(this.conditionManager.telemetryObjects, options));
 
         return Promise.all(criteriaRequests)
             .then(results => {

src/plugins/condition/ConditionManager.js

@@ -282,7 +282,7 @@ export default class ConditionManager extends EventEmitter {
         return currentCondition;
     }
 
-    requestLADConditionSetOutput() {
+    requestLADConditionSetOutput(options) {
         if (!this.conditions.length) {
             return Promise.resolve([]);
         }
@@ -291,7 +291,7 @@ export default class ConditionManager extends EventEmitter {
             let latestTimestamp;
             let conditionResults = {};
             const conditionRequests = this.conditions
-                .map(condition => condition.requestLADConditionResult());
+                .map(condition => condition.requestLADConditionResult(options));
 
             return Promise.all(conditionRequests)
                 .then((results) => {

src/plugins/condition/ConditionSetTelemetryProvider.js

@@ -40,10 +40,10 @@ export default class ConditionSetTelemetryProvider {
         return domainObject.type === 'conditionSet';
     }
 
-    request(domainObject) {
+    request(domainObject, options) {
         let conditionManager = this.getConditionManager(domainObject);
 
-        return conditionManager.requestLADConditionSetOutput()
+        return conditionManager.requestLADConditionSetOutput(options)
             .then(latestOutput => {
                 return latestOutput;
             });
@@ -52,7 +52,9 @@ export default class ConditionSetTelemetryProvider {
     subscribe(domainObject, callback) {
         let conditionManager = this.getConditionManager(domainObject);
 
-        conditionManager.on('conditionSetResultUpdated', callback);
+        conditionManager.on('conditionSetResultUpdated', (data) => {
+            callback(data);
+        });
 
         return this.destroyConditionManager.bind(this, this.openmct.objects.makeKeyString(domainObject.identifier));
     }

src/plugins/condition/StyleRuleManager.js

@@ -35,6 +35,7 @@ export default class StyleRuleManager extends EventEmitter {
         if (styleConfiguration) {
             this.initialize(styleConfiguration);
             if (styleConfiguration.conditionSetIdentifier) {
+                this.openmct.time.on("bounds", this.refreshData.bind(this));
                 this.subscribeToConditionSet();
             } else {
                 this.applyStaticStyle();
@@ -83,6 +84,25 @@ export default class StyleRuleManager extends EventEmitter {
         });
     }
 
+    refreshData(bounds, isTick) {
+        if (!isTick) {
+            let options = {
+                start: bounds.start,
+                end: bounds.end,
+                size: 1,
+                strategy: 'latest'
+            };
+            this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
+                this.openmct.telemetry.request(conditionSetDomainObject, options)
+                    .then(output => {
+                        if (output && output.length) {
+                            this.handleConditionSetResultUpdated(output[0]);
+                        }
+                    });
+            });
+        }
+    }
+
     updateObjectStyleConfig(styleConfiguration) {
         if (!styleConfiguration || !styleConfiguration.conditionSetIdentifier) {
             this.initialize(styleConfiguration || {});
@@ -160,10 +180,14 @@ export default class StyleRuleManager extends EventEmitter {
 
     destroy() {
         if (this.stopProvidingTelemetry) {
+
             this.stopProvidingTelemetry();
             delete this.stopProvidingTelemetry;
         }
 
+        this.openmct.time.off("bounds", this.refreshData);
+        this.openmct.editor.off('isEditing', this.toggleSubscription);
+
         this.conditionSetIdentifier = undefined;
     }
 

src/plugins/condition/criterion/AllTelemetryCriterion.js

@@ -147,12 +147,16 @@ export default class AllTelemetryCriterion extends TelemetryCriterion {
         this.result = evaluateResults(Object.values(this.telemetryDataCache), this.telemetry);
     }
 
-    requestLAD(telemetryObjects) {
+    requestLAD(telemetryObjects, requestOptions) {
-        const options = {
+        let options = {
             strategy: 'latest',
             size: 1
         };
 
+        if (requestOptions !== undefined) {
+            options = Object.assign(options, requestOptions);
+        }
+
         if (!this.isValid()) {
             return this.formatData({}, telemetryObjects);
         }

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -137,12 +137,16 @@ export default class TelemetryCriterion extends EventEmitter {
         }
     }
 
-    requestLAD() {
+    requestLAD(telemetryObjects, requestOptions) {
-        const options = {
+        let options = {
             strategy: 'latest',
             size: 1
         };
 
+        if (requestOptions !== undefined) {
+            options = Object.assign(options, requestOptions);
+        }
+
         if (!this.isValid()) {
             return {
                 id: this.id,

src/plugins/displayLayout/components/TelemetryView.vue

@@ -269,7 +269,12 @@ export default {
         },
         subscribeToObject() {
             this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
-                if (this.openmct.time.clock() !== undefined) {
+                const key = this.openmct.time.timeSystem().key;
+                const datumTimeStamp = datum[key];
+                if (this.openmct.time.clock() !== undefined
+                    || (datumTimeStamp
+                        && (this.openmct.time.bounds().end >= datumTimeStamp))
+                ) {
                     this.updateView(datum);
                 }
             }.bind(this));

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

@@ -19,6 +19,10 @@
             margin: 0 $interiorMargin $interiorMargin 0;
         }
     }
+
+    body.mobile & {
+        flex: 1 0 auto;
+    }
 }
 
 /******************************* GRID ITEMS */

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -91,7 +91,7 @@ export default class CouchObjectProvider {
      * persist any queued objects
      * @private
      */
-    checkResponse(response, intermediateResponse) {
+    checkResponse(response, intermediateResponse, key) {
         let requestSuccess = false;
         const id = response ? response.id : undefined;
         let rev;
@@ -113,6 +113,8 @@ export default class CouchObjectProvider {
             if (this.objectQueue[id].hasNext()) {
                 this.updateQueued(id);
             }
+        } else {
+            this.objectQueue[key].pending = false;
         }
     }
 
@@ -132,8 +134,7 @@ export default class CouchObjectProvider {
             }
 
             //Sometimes CouchDB returns the old rev which fetching the object if there is a document update in progress
-            //Only update the rev if it's the first time we're getting the object from CouchDB. Subsequent revs should only be updated by updates.
+            if (!this.objectQueue[key].pending) {
-            if (!this.objectQueue[key].pending && !this.objectQueue[key].rev) {
                 this.objectQueue[key].updateRevision(response[REV]);
             }
 
@@ -458,7 +459,7 @@ export default class CouchObjectProvider {
         const queued = this.objectQueue[key].dequeue();
         let document = new CouchDocument(key, queued.model);
         this.request(key, "PUT", document).then((response) => {
-            this.checkResponse(response, queued.intermediateResponse);
+            this.checkResponse(response, queued.intermediateResponse, key);
         });
 
         return intermediateResponse.promise;
@@ -473,7 +474,7 @@ export default class CouchObjectProvider {
             const queued = this.objectQueue[key].dequeue();
             let document = new CouchDocument(key, queued.model, this.objectQueue[key].rev);
             this.request(key, "PUT", document).then((response) => {
-                this.checkResponse(response, queued.intermediateResponse);
+                this.checkResponse(response, queued.intermediateResponse, key);
             });
         }
     }

src/styles/_constants-espresso.scss

@@ -362,7 +362,7 @@ $legendTableHeadBg: $colorTabHeaderBg;
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: rgba(#fff, 0.03);
+$colorItemTreeHoverBg: rgba(#fff, 0.1);
 $colorItemTreeHoverFg: #fff;
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used

src/styles/_constants.scss

@@ -212,6 +212,7 @@ $glyph-icon-3-dots: '\ea37';
 $glyph-icon-grid-on: '\ea38';
 $glyph-icon-grid-off: '\ea39';
 $glyph-icon-camera: '\ea3a';
+$glyph-icon-folders-collapse: '\ea3b';
 $glyph-icon-activity: '\eb00';
 $glyph-icon-activity-mode: '\eb01';
 $glyph-icon-autoflow-tabular: '\eb02';

src/styles/_glyphs.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@font-face {
+ @font-face {
     // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
     font-family: 'symbolsfont';
     src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'),
@@ -144,6 +144,7 @@
 .icon-grid-on {  @include glyphBefore($glyph-icon-grid-on); }
 .icon-grid-off {  @include glyphBefore($glyph-icon-grid-off); }
 .icon-camera {  @include glyphBefore($glyph-icon-camera); }
+.icon-folders-collapse {  @include glyphBefore($glyph-icon-folders-collapse); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }

src/styles/fonts/Open MCT Symbols 16px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1602779919972
+    "created": 1621648023886
   },
   "iconSets": [
     {
@@ -847,13 +847,21 @@
           "code": 59962,
           "tempChar": ""
         },
+        {
+          "order": 196,
+          "id": 168,
+          "name": "icon-folders-collapse",
+          "prevSize": 24,
+          "code": 59963,
+          "tempChar": ""
+        },
         {
           "order": 144,
           "id": 97,
           "name": "icon-activity",
           "prevSize": 24,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -861,7 +869,7 @@
           "name": "icon-activity-mode",
           "prevSize": 24,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -869,7 +877,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 24,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -877,7 +885,7 @@
           "name": "icon-clock",
           "prevSize": 24,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -885,7 +893,7 @@
           "name": "icon-database",
           "prevSize": 24,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -893,7 +901,7 @@
           "name": "icon-database-query",
           "prevSize": 24,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -901,7 +909,7 @@
           "name": "icon-dataset",
           "prevSize": 24,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -909,7 +917,7 @@
           "name": "icon-datatable",
           "prevSize": 24,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -917,7 +925,7 @@
           "name": "icon-dictionary",
           "prevSize": 24,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -925,7 +933,7 @@
           "name": "icon-folder",
           "prevSize": 24,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -933,7 +941,7 @@
           "name": "icon-image",
           "prevSize": 24,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -941,7 +949,7 @@
           "name": "icon-layout",
           "prevSize": 24,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -949,7 +957,7 @@
           "name": "icon-object",
           "prevSize": 24,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -957,7 +965,7 @@
           "name": "icon-object-unknown",
           "prevSize": 24,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -965,7 +973,7 @@
           "name": "icon-packet",
           "prevSize": 24,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -973,7 +981,7 @@
           "name": "icon-page",
           "prevSize": 24,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -981,7 +989,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 24,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -989,7 +997,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 24,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -997,7 +1005,7 @@
           "name": "icon-session",
           "prevSize": 24,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -1005,7 +1013,7 @@
           "name": "icon-tabular",
           "prevSize": 24,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -1013,7 +1021,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 24,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -1021,7 +1029,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 24,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -1029,7 +1037,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 24,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -1037,7 +1045,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 24,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -1045,7 +1053,7 @@
           "name": "icon-telemetry",
           "prevSize": 24,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -1053,7 +1061,7 @@
           "name": "icon-timeline",
           "prevSize": 24,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -1061,7 +1069,7 @@
           "name": "icon-timer",
           "prevSize": 24,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -1069,7 +1077,7 @@
           "name": "icon-topic",
           "prevSize": 24,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -1077,7 +1085,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 24,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -1085,7 +1093,7 @@
           "name": "icon-summary-widget",
           "prevSize": 24,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -1093,7 +1101,7 @@
           "name": "icon-notebook",
           "prevSize": 24,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 168,
@@ -1101,7 +1109,7 @@
           "name": "icon-tabs-view",
           "prevSize": 24,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -1109,7 +1117,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 24,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 166,
@@ -1117,7 +1125,7 @@
           "name": "icon-generator-sine",
           "prevSize": 24,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 167,
@@ -1125,7 +1133,7 @@
           "name": "icon-generator-event",
           "prevSize": 24,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 165,
@@ -1133,7 +1141,7 @@
           "name": "icon-gauge-v2",
           "prevSize": 24,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 170,
@@ -1141,7 +1149,7 @@
           "name": "icon-spectra",
           "prevSize": 24,
           "code": 60196,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 171,
@@ -1149,7 +1157,7 @@
           "name": "icon-telemetry-spectra",
           "prevSize": 24,
           "code": 60197,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 172,
@@ -1157,7 +1165,7 @@
           "name": "icon-pushbutton",
           "prevSize": 24,
           "code": 60198,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 174,
@@ -1165,7 +1173,7 @@
           "name": "icon-conditional",
           "prevSize": 24,
           "code": 60199,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 178,
@@ -1173,7 +1181,7 @@
           "name": "icon-condition-widget",
           "prevSize": 24,
           "code": 60200,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 180,
@@ -1181,7 +1189,7 @@
           "name": "icon-alphanumeric",
           "prevSize": 24,
           "code": 60201,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 183,
@@ -1189,7 +1197,7 @@
           "name": "icon-image-telemetry",
           "prevSize": 24,
           "code": 60202,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -2993,6 +3001,29 @@
             ]
           }
         },
+        {
+          "id": 168,
+          "paths": [
+            "M896 320v448c-0.215 70.606-57.394 127.785-127.979 128l-0.021 0h-576c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0z",
+            "M832 704v-448c-0.215-70.606-57.394-127.785-127.979-128l-0.021-0h-192l-101.5-82.74c-24.88-24.9-74.040-45.26-109.24-45.26h-237.26c-35.305 0.102-63.898 28.695-64 63.99l-0 0.010v640c0.215 70.606 57.394 127.785 127.979 128l0.021 0h576c70.606-0.215 127.785-57.394 128-127.979l0-0.021zM128 644v-516l256 260z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-folders-collapse"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "colorPermutations": {
+            "12552552551": [
+              {},
+              {}
+            ]
+          }
+        },
         {
           "id": 97,
           "paths": [

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

@@ -112,6 +112,7 @@
 <glyph unicode="&#xea38;" glyph-name="icon-grid-on" d="M1024 448v128h-256v256h-128v-256h-256v256h-128v-256h-256v-128h256v-256h-256v-128h256v-256h128v256h256v-256h128v256h256v128h-256v256zM640 192h-256v256h256z" />
 <glyph unicode="&#xea39;" glyph-name="icon-grid-off" d="M256 280.6l128 157.6v9.8h8l104 128h-112v256h-128v-256h-256v-128h256v-167.4zM184 192h-184v-128h80l104 128zM768 359.4l-128-157.6v-9.8h-8l-104-128h112v-256h128v256h256v128h-256v167.4zM840 448h184v128h-80l-104-128zM832 832l-832-1024h192l832 1024h-192z" />
 <glyph unicode="&#xea3a;" glyph-name="icon-camera" d="M896 576h-128l-128 256h-256l-128-256h-128c-70.601-0.227-127.773-57.399-128-127.978v-512.022c0.227-70.601 57.399-127.773 127.978-128h768.022c70.601 0.227 127.773 57.399 128 127.978v512.022c-0.227 70.601-57.399 127.773-127.978 128h-0.022zM512-32c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0z" />
+<glyph unicode="&#xea3b;" glyph-name="icon-folders-collapse" d="M896 512v-448c-0.215-70.606-57.394-127.785-127.979-128h-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v448.021c-0.215 70.606-57.394 127.785-127.979 128h-0.021zM832 128v448c-0.215 70.606-57.394 127.785-127.979 128h-192.021l-101.5 82.74c-24.88 24.9-74.040 45.26-109.24 45.26h-237.26c-35.305-0.102-63.898-28.695-64-63.99v-640.010c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v0.021zM128 188v516l256-260z" />
 <glyph unicode="&#xeb00;" glyph-name="icon-activity" d="M576 768h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xeb01;" glyph-name="icon-activity-mode" d="M512 832c-214.8 0-398.8-132.4-474.8-320h90.8c56.8 0 108-24.8 143-64h241l-192 192h256l320-320-320-320h-256l192 192h-241c-35-39.2-86.2-64-143-64h-90.8c76-187.6 259.8-320 474.8-320 282.8 0 512 229.2 512 512s-229.2 512-512 512z" />
 <glyph unicode="&#xeb02;" glyph-name="icon-autoflow-tabular" d="M192 832c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 832h256v-1024h-256v1024zM832 832h-64v-704h256v512c0 105.6-86.4 192-192 192z" />

src/ui/layout/Layout.vue

@@ -54,6 +54,13 @@
             label="Browse"
             collapsable
         >
+            <button
+                slot="controls"
+                class="c-icon-button l-shell__reset-tree-button icon-folders-collapse"
+                title="Collapse all tree items"
+                @click="handleTreeReset"
+            >
+            </button>
             <button
                 slot="controls"
                 class="c-icon-button l-shell__sync-tree-button icon-target"
@@ -63,6 +70,7 @@
             </button>
             <mct-tree
                 :sync-tree-navigation="triggerSync"
+                :reset-tree-navigation="triggerReset"
                 class="l-shell__tree"
             />
         </pane>
@@ -148,6 +156,7 @@ export default {
             hasToolbar: false,
             actionCollection: undefined,
             triggerSync: false,
+            triggerReset: false,
             headExpanded
         };
     },
@@ -228,6 +237,9 @@ export default {
         },
         handleSyncTreeNavigation() {
             this.triggerSync = !this.triggerSync;
+        },
+        handleTreeReset() {
+            this.triggerReset = !this.triggerReset;
         }
     }
 };

src/ui/layout/layout.scss

@@ -100,8 +100,14 @@
         &__pane-tree {
             background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
 
-            [class*="expand-button"],
+            .l-pane__header {
-            [class*="sync-tree-button"] {
+                // Hide all buttons except the collapse button
+                > :not(.l-pane__collapse-button) {
+                    display: none;
+                }
+            }
+
+            [class*="expand-button"] {
                 display: none;
             }
 

src/ui/layout/mct-tree.scss

@@ -30,7 +30,7 @@
             width: 100%;
         }
 
-        &__scrollable-children {
+        &__scrollable {
             overflow: auto;
         }
 
@@ -56,6 +56,7 @@
     @include userSelectNone();
     overflow-x: hidden;
     overflow-y: auto;
+    padding-right: $interiorMarginSm;
 
     .icon-arrow-nav-to-parent {
         visibility: hidden;
@@ -90,7 +91,7 @@
             color: $colorItemTreeIcon;
         }
 
-        &:hover {
+        @include hover {
             background: $colorItemTreeHoverBg;
             filter: $filterHov;
         }
@@ -124,14 +125,16 @@
     }
 
     &__item {
-        > * + * {
+        [class*="view-control"] {
-            margin-left: $interiorMarginSm;
+            padding: 2px 10px;
         }
 
-        @include desktop {
+        > * + * {
-            &:hover {
+            margin-left: ceil($interiorMarginSm / 2);
-                background: $colorItemTreeHoverBg;
+        }
-            }
+
+        @include hover {
+            background: $colorItemTreeHoverBg;
         }
 
         // Object labels in trees

src/ui/layout/tree-item.vue

@@ -1,9 +1,6 @@
 <template>
 <div
-    :style="{
+    :style="treeItemStyles"
-        'top': virtualScroll ? itemTop : 'auto',
-        'position': virtualScroll ? 'absolute' : 'relative'
-    }"
     class="c-tree__item-h"
 >
     <div
@@ -17,28 +14,23 @@
         @contextmenu.capture="handleContextMenu"
     >
         <view-control
-            ref="navUp"
+            ref="navigate"
-            v-model="expanded"
             class="c-tree__item__view-control"
-            :control-class="'icon-arrow-nav-to-parent'"
+            :value="isOpen || isLoading"
-            :enabled="showUp"
+            :enabled="!activeSearch && hasComposition"
-            @input="resetTreeHere"
+            @input="navigationClick()"
         />
         <object-label
             ref="objectLabel"
             :domain-object="node.object"
             :object-path="node.objectPath"
             :navigate-to-path="navigationPath"
-            :style="{ paddingLeft: leftOffset }"
             @context-click-active="setContextClickActive"
         />
-        <view-control
+        <span
-            ref="navDown"
+            v-if="isLoading"
-            v-model="expanded"
+            class="loading"
-            class="c-tree__item__view-control"
+        ></span>
-            :control-class="'c-nav__down'"
-            :enabled="hasComposition && showDown"
-        />
     </div>
 </div>
 </template>
@@ -59,17 +51,13 @@ export default {
             type: Object,
             required: true
         },
-        leftOffset: {
+        activeSearch: {
-            type: String,
-            default: '0px'
-        },
-        showUp: {
             type: Boolean,
             default: false
         },
-        showDown: {
+        leftOffset: {
-            type: Boolean,
+            type: String,
-            default: true
+            default: '0px'
         },
         itemIndex: {
             type: Number,
@@ -86,9 +74,13 @@ export default {
             required: false,
             default: 0
         },
-        virtualScroll: {
+        openItems: {
-            type: Boolean,
+            type: Array,
-            default: false
+            required: true
+        },
+        loadingItems: {
+            type: Object,
+            required: true
         }
     },
     data() {
@@ -97,7 +89,6 @@ export default {
         return {
             hasComposition: false,
             navigated: this.isNavigated(),
-            expanded: false,
             contextClickActive: false
         };
     },
@@ -113,37 +104,44 @@ export default {
 
             return parentKeyString !== this.node.object.location;
         },
-        itemTop() {
+        isLoading() {
-            return (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
+            return Boolean(this.loadingItems[this.navigationPath]);
-        }
+        },
-    },
+        isOpen() {
-    watch: {
+            return this.openItems.includes(this.navigationPath);
-        expanded() {
+        },
-            this.$emit('expanded', this.domainObject);
+        treeItemStyles() {
+            let itemTop = (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
+
+            return {
+                'top': itemTop,
+                'position': 'absolute',
+                'padding-left': this.leftOffset
+            };
         }
     },
     mounted() {
-        let objectComposition = this.openmct.composition.get(this.node.object);
-
         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.domainObject)) {
-        if (objectComposition) {
             this.hasComposition = true;
         }
 
         this.openmct.router.on('change:path', this.highlightIfNavigated);
+
+        this.$emit('tree-item-mounted', this.navigationPath);
     },
     destroyed() {
         this.openmct.router.off('change:path', this.highlightIfNavigated);
+        this.$emit('tree-item-destoyed', this.navigationPath);
     },
     methods: {
+        navigationClick() {
+            this.$emit('navigation-click', this.isOpen || this.isLoading ? 'close' : 'open');
+        },
         handleClick(event) {
             // skip for navigation, let viewControl handle click
-            if ([this.$refs.navUp.$el, this.$refs.navDown.$el].includes(event.target)) {
+            if (this.$refs.navigate.$el === event.target) {
                 return;
             }
 
@@ -160,9 +158,6 @@ export default {
         highlightIfNavigated() {
             this.navigated = this.isNavigated();
         },
-        resetTreeHere() {
-            this.$emit('resetTree', this.node);
-        },
         setContextClickActive(active) {
             this.contextClickActive = active;
         }