From dbed9262c0032531d73019bbe85a963020dfcaef Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 1 Jun 2021 15:47:21 -0700
Subject: [PATCH] Tree revert refactor (#3886)

* Reverts object tree to expand/collapse tree model
* Retains expanded/collapsed state
* Adds collapse all feature
---
 src/api/composition/CompositionCollection.js  |   4 +-
 .../folderView/components/grid-view.scss      |   4 +
 src/styles/_constants-espresso.scss           |   2 +-
 src/styles/_constants.scss                    |   1 +
 src/styles/_glyphs.scss                       |   1 +
 src/styles/fonts/Open MCT Symbols 16px.json   | 119 ++-
 src/styles/fonts/Open-MCT-Symbols-16px.svg    |   1 +
 src/styles/fonts/Open-MCT-Symbols-16px.ttf    | Bin 23104 -> 23240 bytes
 src/styles/fonts/Open-MCT-Symbols-16px.woff   | Bin 23180 -> 23316 bytes
 src/ui/layout/Layout.vue                      |  12 +
 src/ui/layout/layout.scss                     |  10 +-
 src/ui/layout/mct-tree.scss                   |  19 +-
 src/ui/layout/mct-tree.vue                    | 957 ++++++++----------
 src/ui/layout/tree-item.vue                   |  89 +-
 14 files changed, 578 insertions(+), 641 deletions(-)

diff --git a/src/api/composition/CompositionCollection.js b/src/api/composition/CompositionCollection.js
index 69b024548e..5a013fbe30 100644
--- a/src/api/composition/CompositionCollection.js
+++ b/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));
diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss
index 3e3a98bd86..72a4028946 100644
--- a/src/plugins/folderView/components/grid-view.scss
+++ b/src/plugins/folderView/components/grid-view.scss
@@ -19,6 +19,10 @@
             margin: 0 $interiorMargin $interiorMargin 0;
         }
     }
+
+    body.mobile & {
+        flex: 1 0 auto;
+    }
 }
 
 /******************************* GRID ITEMS */
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 5274932f6a..a169272d77 100644
--- a/src/styles/_constants-espresso.scss
+++ b/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
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
index af7e37eb31..9fe2d78cd4 100755
--- a/src/styles/_constants.scss
+++ b/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';
diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss
index e49ccd2925..0a4702b3a2 100755
--- a/src/styles/_glyphs.scss
+++ b/src/styles/_glyphs.scss
@@ -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); }
diff --git a/src/styles/fonts/Open MCT Symbols 16px.json b/src/styles/fonts/Open MCT Symbols 16px.json
index 15e20d9d38..416ddff325 100755
--- a/src/styles/fonts/Open MCT Symbols 16px.json	
+++ b/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": [
diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.svg b/src/styles/fonts/Open-MCT-Symbols-16px.svg
index a5ec213c76..0ce6df4786 100644
--- a/src/styles/fonts/Open-MCT-Symbols-16px.svg
+++ b/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" />
diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.ttf b/src/styles/fonts/Open-MCT-Symbols-16px.ttf
index bff958ea1783a8e0addea33951a027da9861bd63..162658da3231ead1aa639161e62cf1d8745541f9 100644
GIT binary patch
delta 458
zcmX@Gh4I8z#tDk`tov0M7#L+37#LF06N?Lgv;dIb0Hit6b1Ku8Z7os;@;ew9g6?Fb
zCZ@>s_BS&ygrorF%`$)joGh$sf&4i@zDh=JNks$)M>~*zfPsN2B_}^QQNPlehk+p+
zWQR#^VnqSNa)$d13=t7P^$K~3xv3J0&u6~@3RD0!=oRD_moP8`r5K`COx!V*(R#8U
zqda5Y<~+u3qk5qDe+L!@W(S}H)fhB^1`3L>DJzPI87mr@nF^YyDKi5JZANuHMr}qV
zHc>&SjH)0bbAz|(-vi#JOb({r-lh)TrUz1m9i-n%sX>JPIxsRYG5iBcf}|M_n0o(f
z0Fl8$(rQwF8$g0KOw26*{%rnk{83&;$BIuqp5Nvx12+rEsSJ0{Nt(jw$t)q}j59ae
zgzRSA{5iCZF}6x_p5!wr9;ptgN76yk%VZ2>;$-H?oRRq<D<(TdcAM-2xh8oj`8^6s
z3O$NUiklQ)DfKB`Q`S)4ry`*epi-r>N#&Jlnd&w*F|`!6Rq8qF%hb<l{Lsu}U<BGY
KbMv+EEG7U<QhSvE

delta 326
zcmX@HmGQt9#tDk`%==Xs7#L+37#LF06N?Lgv;dIb0Hit6b1KuACa0$X`5g=lK@l0L
zi77I^+nE^{f*%0o%`$)joGh$s7#Kn%fP9sV+>(kA4vuyp--dyKDIq66IngjtW(osC
z*c_l4M!AU<1q{m=?lUliUjV9C$V<#kl~8;>`wdXw15krrL4I)w1JHN|hA4%JJEk&P
zP4;7yXUyH4$JlMOxz^;pyiBc$>dAP1o39MqEFfhJx7X=>h0&8cLd+RwY(5aOn{jh}
zSQBGxjN}r@Q&MhH3#0|4Q>5R?$jC&=bjfU!xgr}RTOvD8&Oz>me3kqI1uumIiUo=*
zlzfz?C_PiIQNE_ar(&T}pt3^MM72cqikgyIhPsw|ih7U6HccI%ZHz!XV{=?Y783xf
C;#<uC

diff --git a/src/styles/fonts/Open-MCT-Symbols-16px.woff b/src/styles/fonts/Open-MCT-Symbols-16px.woff
index ae0ac170fada60522fca7a925c1a5a5e8c22deb2..512d06356d448d5f2e032e329eb4a73c86dfef1c 100644
GIT binary patch
delta 522
zcmeC#$~a{kqeQvCn;Qco0}w=uFmQwDs1ppV42+WtqeLd^sMfRYS4mGSE?{6_JOh;D
zfMS94oXRwy*cAqbpgSPEY-^EnMrvXT14GCLpc*p}mh0_r&HxGm#a;mUDj>|s!n!si
zx1@rBA(V%KfeEOdDJ6n~qdg}-8K^ECWRD35>sLDS<R(@W=rAxuECFg%0OREh_wy2S
zQ-NYffEx8cSn>JnHwF2{B|vw7nfPZeqxIxjjPi_mn|CpG8`U#2F#LC5VPJM(5MWSa
z&;%MRD8i<!C?aO8Xk=z8XriXf3?#G})%6&)8I{;X1)(ykf{e@!-ll&Kc$+dgn0kAg
zI(VBNNELRFek-L05&G-E$iT$#4=4$eW;|f({jUK;1`A26N&RgA3ED6*v;6zB+1ccy
zyo`<&pL#sM%~u9)7NAEM819^tG=<TV147IhXKwBY+0D4wKCF!~y-ISP<TEKAsSc?}
z(m~S8WDI2DWah}6k@+DjCObuTo9qL*CV46OJqk(+J&H_<n-pIu^(kFb)==K3BB2tX
zQl+v<<&|og>NYhowG_2g>N)Dm)X!=B(9C0C1ll;0;VuI&$Yus6U<?aywvX^-0sy?S
Bg<${y

delta 376
zcmbQTjj?AdqeQvCn;Qco0}w>@FmQuu2L@IK#>tG)!V|UC>Y4Yeq$d^^FfcHl0ZMW}
zu|RrGWg1ZI3Ijt>1PC)tPEX57O-x~62+;wmF#};4-|fs9KtZ4wP@F*pggIGQ*JR|D
zQ~<>~7#NrmKsbbhqdg}-8K^Go1<*_*5H?JdnUb4WQ2;b7LI$W&0gRV1+|NtQO$CbC
z05$4?u;TOCZwm5@OMvdrnfPZeqt)bDjPi`Rn|CpG8*M&m@?Ku1)<pGWJipCX25uIh
zAq)(+*XewP(UY%)m^04U%oDnsar5c0CdSwp$t9Afq}-$yNDD}(NWYVjk%^M&lG!G6
zMK(ybM0TE>gWL`ID)|QrUJ3^k3lvu<`6x|MdZt{Xd`*Q<#X_Y(WreDVYKiI<H6^tS
ZbuIN2^&X9FnxFt-1mYQ+S4Cto0RYl-VkZCq

diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index 4ceabc22d8..5e612f33c2 100644
--- a/src/ui/layout/Layout.vue
+++ b/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;
         }
     }
 };
diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss
index d51acf8046..50ccdbbbdd 100644
--- a/src/ui/layout/layout.scss
+++ b/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"],
-            [class*="sync-tree-button"] {
+            .l-pane__header {
+                // Hide all buttons except the collapse button
+                > :not(.l-pane__collapse-button) {
+                    display: none;
+                }
+            }
+
+            [class*="expand-button"] {
                 display: none;
             }
 
diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss
index ab3c9e2080..7965650f3b 100644
--- a/src/ui/layout/mct-tree.scss
+++ b/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 {
-        > * + * {
-            margin-left: $interiorMarginSm;
+        [class*="view-control"] {
+            padding: 2px 10px;
         }
 
-        @include desktop {
-            &:hover {
-                background: $colorItemTreeHoverBg;
-            }
+        > * + * {
+            margin-left: ceil($interiorMarginSm / 2);
+        }
+
+        @include hover {
+            background: $colorItemTreeHoverBg;
         }
 
         // Object labels in trees
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index c4a9b5a846..c9e5071c36 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -35,8 +35,7 @@
         ref="mainTree"
         class="c-tree-and-search__tree c-tree"
     >
-        <!-- ancestors -->
-        <div v-if="!activeSearch">
+        <div>
 
             <div
                 ref="dummyItem"
@@ -60,68 +59,46 @@
                     <span class="c-tree__item__view-control c-nav__down"></span>
                 </div>
             </div>
-
-            <tree-item
-                v-for="(ancestor, index) in focusedAncestors"
-                :key="ancestor.id"
-                :node="ancestor"
-                :show-up="index !== 0 && index < focusedAncestors.length && initialLoad"
-                :show-down="false"
-                :left-offset="index * 10 + 'px'"
-                @resetTree="beginNavigationRequest('handleReset', ancestor)"
-            />
-            <!-- loading -->
-            <div
-                v-if="isLoading"
-                :style="indicatorLeftOffset"
-                class="c-tree__item c-tree-and-search__loading loading"
-            >
-                <span class="c-tree__item__label">Loading...</span>
-            </div>
-            <!-- end loading -->
         </div>
 
-        <!-- currently viewed children -->
-        <transition
-            name="children"
-            appear
-            @after-enter="autoScroll"
+        <div
+            ref="scrollable"
+            class="c-tree__scrollable"
+            :style="scrollableStyles"
+            @scroll="updateVisibleItems()"
         >
-            <div
-                v-if="showChildContainer"
-                :style="childrenListStyles()"
-                :class="childrenSlideClass"
-            >
+            <div :style="childrenHeightStyles">
+                <tree-item
+                    v-for="(treeItem, index) in visibleItems"
+                    :key="treeItem.navigationPath"
+                    :node="treeItem"
+                    :active-search="activeSearch"
+                    :left-offset="!activeSearch ? treeItem.leftOffset : '0px'"
+                    :item-offset="itemOffset"
+                    :item-index="index"
+                    :item-height="itemHeight"
+                    :open-items="openTreeItems"
+                    :loading-items="treeItemLoading"
+                    @tree-item-mounted="scrollToCheck($event)"
+                    @tree-item-destroyed="removeCompositionListenerFor($event)"
+                    @navigation-click="treeItemAction(treeItem, $event)"
+                />
+                <!-- main loading -->
                 <div
-                    ref="scrollable"
-                    class="c-tree__scrollable-children"
-                    :style="scrollableStyles()"
-                    @scroll="scrollItems"
+                    v-if="isLoading"
+                    class="c-tree__item c-tree-and-search__loading loading"
                 >
-                    <div :style="{ height: childrenHeight + 'px' }">
-                        <tree-item
-                            v-for="(treeItem, index) in visibleItems"
-                            :key="treeItem.id"
-                            :node="treeItem"
-                            :left-offset="itemLeftOffset"
-                            :item-offset="itemOffset"
-                            :item-index="index"
-                            :item-height="itemHeight"
-                            :virtual-scroll="true"
-                            :show-down="activeSearch ? false : true"
-                            @expanded="beginNavigationRequest('handleExpanded', treeItem)"
-                        />
-                        <div
-                            v-if="showNoItems"
-                            :style="indicatorLeftOffset"
-                            class="c-tree__item c-tree__item--empty"
-                        >
-                            No items
-                        </div>
-                    </div>
+                    <span class="c-tree__item__label">Loading...</span>
+                </div>
+                <!-- end loading -->
+                <div
+                    v-if="showNoItems"
+                    class="c-tree__item c-tree__item--empty"
+                >
+                    No items
                 </div>
             </div>
-        </transition>
+        </div>
     </div>
     <!-- end main tree -->
 
@@ -132,10 +109,11 @@
 import _ from 'lodash';
 import treeItem from './tree-item.vue';
 import search from '../components/search.vue';
-import uuid from 'uuid';
 
-const ROOT_PATH = 'browse';
-const ITEM_BUFFER = 5;
+const ITEM_BUFFER = 25;
+const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
+const RETURN_ALL_DESCDNDANTS = true;
+const TREE_ITEM_INDENT_PX = 15;
 
 export default {
     name: 'MctTree',
@@ -148,169 +126,117 @@ export default {
         syncTreeNavigation: {
             type: Boolean,
             required: true
+        },
+        resetTreeNavigation: {
+            type: Boolean,
+            required: true
         }
     },
     data() {
         return {
-            root: undefined,
-            initialLoad: false,
             isLoading: false,
+            treeItemLoading: {},
             mainTreeHeight: undefined,
             searchLoading: false,
             searchValue: '',
-            childItems: [],
+            treeItems: [],
+            openTreeItems: [],
+            compositionCollections: {},
             searchResultItems: [],
             visibleItems: [],
-            ancestors: [],
-            tempAncestors: [],
-            childrenSlideClass: 'down',
             updatingView: false,
             itemHeight: 27,
             itemOffset: 0,
             activeSearch: false,
-            multipleRootChildren: false,
-            observedAncestors: {},
             mainTreeTopMargin: undefined
         };
     },
     computed: {
-        currentTreePath() {
-            let path = [...this.ancestors]
-                .map((ancestor) => ancestor.id)
-                .join('/');
-
-            // if not multiRootChildren, then need to add in root ('browse')
-            if (!this.multipleRootChildren) {
-                path = ROOT_PATH + '/' + path;
-            // if multiRootChldren, need to replace root id with 'browse'
-            } else {
-                path = path.replace('ROOT', ROOT_PATH);
-            }
-
-            return path;
-        },
-        focusedItems() {
-            return this.activeSearch ? this.searchResultItems : this.childItems;
-        },
-        focusedAncestors() {
-            return this.isLoading ? this.tempAncestors : this.ancestors;
-        },
-        itemLeftOffset() {
-            return this.activeSearch ? '0px' : this.ancestors.length * 10 + 'px';
-        },
-        indicatorLeftOffset() {
-            let offset = ((this.focusedAncestors.length + 1) * 10);
-
-            return {
-                paddingLeft: offset + 'px'
-            };
-        },
-        ancestorsHeight() {
-            if (this.activeSearch) {
-                return 0;
-            }
-
-            return this.itemHeight * this.ancestors.length;
-        },
-        pageThreshold() {
-            return Math.ceil(this.availableContainerHeight / this.itemHeight) + ITEM_BUFFER;
-        },
         childrenHeight() {
             let childrenCount = this.focusedItems.length || 1;
 
             return (this.itemHeight * childrenCount) - this.mainTreeTopMargin; // 5px margin
         },
-        availableContainerHeight() {
-            return this.mainTreeHeight - this.ancestorsHeight;
+        childrenHeightStyles() {
+            let height = this.childrenHeight + 'px';
+
+            return { height };
+        },
+        focusedItems() {
+            return this.activeSearch ? this.searchResultItems : this.treeItems;
+        },
+        pageThreshold() {
+            return Math.ceil(this.mainTreeHeight / this.itemHeight) + ITEM_BUFFER;
+        },
+        scrollableStyles() {
+            let height = this.mainTreeHeight + 'px';
+
+            return { height };
         },
         showNoItems() {
-            return this.visibleItems.length === 0 && !this.activeSearch && !this.isLoading;
+            return this.visibleItems.length === 0 && !this.activeSearch && this.searchValue === '' && !this.isLoading;
         },
         showNoSearchResults() {
             return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
-        },
-        showChildContainer() {
-            return !this.isLoading && !this.searchLoading;
         }
     },
     watch: {
         syncTreeNavigation() {
-            // if there is an abort controller, then a search is in progress and will need to be canceled
-            if (this.abortController) {
-                this.abortController.abort();
-                delete this.abortController;
-            }
-
             this.searchValue = '';
 
+            // if there is an abort controller, then a search is in progress and will need to be canceled
+            if (this.abortSearchController) {
+                this.abortSearchController.abort();
+                delete this.abortSearchController;
+            }
+
             if (!this.openmct.router.path) {
                 return;
             }
 
-            if (this.currentPathIsActivePath() && !this.isLoading) {
-                this.skipScroll = false;
-                this.autoScroll();
-
-                return;
-            }
-
-            let routePath = [...this.openmct.router.path];
-            routePath.shift(); // remove the child, so it navigates to the parent
-            routePath.push(this.root); // adding root
-            this.beginNavigationRequest('jumpTo', [...routePath].reverse());
+            this.$nextTick(this.showCurrentPathInTree);
+        },
+        resetTreeNavigation() {
+            [...this.openTreeItems].reverse().map(this.closeTreeItemByPath);
         },
         searchValue() {
             if (this.searchValue !== '' && !this.activeSearch) {
                 this.activeSearch = true;
                 this.$refs.scrollable.scrollTop = 0;
-                this.skipScroll = true;
             } else if (this.searchValue === '') {
                 this.activeSearch = false;
-                this.skipScroll = false;
             }
         },
-        ancestors() {
-            this.observeAncestors();
-        },
-        availableContainerHeight() {
+        mainTreeHeight() {
             this.updateVisibleItems();
         },
         focusedItems() {
             this.updateVisibleItems();
+        },
+        openTreeItems() {
+            this.setSavedOpenItems();
         }
     },
     async mounted() {
-        this.isLoading = true;
-
         await this.initialize();
+        await this.loadRoot();
+        this.isLoading = false;
 
-        let rootComposition = await this.loadRoot();
-        let path = ROOT_PATH;
-
-        if (!rootComposition) {
-            return;
-        }
-
-        if (!this.multipleRootChildren && rootComposition[0]) {
-            let id = this.openmct.objects.makeKeyString(rootComposition[0].identifier);
-            path += '/' + id;
-        }
-
-        this.beginNavigationRequest('jumpTo', path);
+        await this.syncTreeOpenItems();
     },
     created() {
         this.getSearchResults = _.debounce(this.getSearchResults, 400);
         this.handleWindowResize = _.debounce(this.handleWindowResize, 500);
+        this.scrollEndEvent = _.debounce(this.scrollEndEvent, 100);
     },
     destroyed() {
         window.removeEventListener('resize', this.handleWindowResize);
-        this.stopObservingAncestors();
     },
     methods: {
         async initialize() {
-            // required to index tree objects that do not have search providers
+            this.isLoading = true;
             this.openmct.$injector.get('searchService');
-
+            this.getSavedOpenItems();
             window.addEventListener('resize', this.handleWindowResize);
 
             await this.calculateHeights();
@@ -318,199 +244,337 @@ export default {
             return;
         },
         async loadRoot() {
-            this.root = await this.openmct.objects.get('ROOT');
+            this.treeItems = [];
+            const root = await this.openmct.objects.get('ROOT');
 
-            if (!this.root.identifier) {
+            if (!root.identifier) {
                 return false;
             }
 
-            let rootCompositionCollection = this.openmct.composition.get(this.root);
-            let rootComposition = await rootCompositionCollection.load();
+            // will need to listen for root composition changes as well
 
-            if (rootComposition.length > 1) {
-                this.multipleRootChildren = true;
-            }
-
-            return rootComposition;
+            this.treeItems = await this.loadAndBuildTreeItemsFor(root, []);
         },
-        async beginNavigationRequest(type, request) {
-            let requestId = uuid();
-
-            this.isLoading = true;
-            this.latestNavigationRequest = requestId;
-
-            if (['handleReset', 'handleExpanded'].indexOf(type) !== -1) {
-                this.skipScroll = true;
+        treeItemAction(parentItem, type) {
+            if (type === 'close') {
+                this.closeTreeItem(parentItem);
             } else {
-                this.skipScroll = false;
-            }
-
-            let success = await this[type](request, requestId);
-
-            if (success && this.isLatestNavigationRequest(requestId)) {
-                this.isLoading = false;
+                this.openTreeItem(parentItem);
             }
         },
-        isLatestNavigationRequest(requestId) {
-            return this.latestNavigationRequest === requestId;
-        },
-        // will jump to an object path or a string path
-        async jumpTo(path, requestId) {
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
+        async openTreeItem(parentItem) {
+            let parentPath = parentItem.navigationPath;
+
+            this.startItemLoad(parentPath);
+            // pass in abort signal when functional
+            let childrenItems = await this.loadAndBuildTreeItemsFor(parentItem.object, parentItem.objectPath);
+            let parentIndex = this.treeItems.indexOf(parentItem);
+
+            // if it's not loading, it was aborted
+            if (!this.isItemLoading(parentPath) || parentIndex === -1) {
+                return;
             }
 
-            // if path string, build object string
-            if (typeof path === 'string') {
-                path = await this.buildObjectPathFromString(path, requestId);
+            this.endItemLoad(parentPath);
 
-                if (!path) {
-                    return false;
+            this.treeItems.splice(parentIndex + 1, 0, ...childrenItems);
+
+            if (!this.isTreeItemOpen(parentItem)) {
+                this.openTreeItems.push(parentPath);
+            }
+
+            for (let item of childrenItems) {
+                if (this.isTreeItemOpen(item)) {
+                    this.openTreeItem(item);
                 }
             }
 
-            // build ancestors tree items from objects
-            this.tempAncestors = [];
-
-            for (let i = 0; i < path.length; i++) {
-                let builtAncestor = this.buildTreeItem(path[i], path.slice(0, i));
-                this.tempAncestors.push(builtAncestor);
+            return;
+        },
+        closeTreeItemByPath(path) {
+            // if actively loading, abort
+            if (this.isItemLoading(path)) {
+                this.abortItemLoad(path);
             }
 
-            // load children for last ancestor
-            let childrenItems = await this.getChildrenAsTreeItems(this.tempAncestors[this.tempAncestors.length - 1], path, requestId);
+            let pathIndex = this.openTreeItems.indexOf(path);
 
-            // if all is good, return true for successful navigation
-            return this.updateTree(this.tempAncestors, childrenItems, requestId);
-        },
-        async handleReset(node, requestId) {
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
+            if (pathIndex === -1) {
+                return;
             }
 
-            this.childrenSlideClass = 'up';
-
-            let index = this.tempAncestors.indexOf(node);
-
-            this.tempAncestors = [...this.ancestors];
-            this.tempAncestors.splice(index);
-
-            let parentNode = this.tempAncestors[index - 1];
-
-            let objectPath = this.ancestorsAsObjects();
-            objectPath.splice(objectPath.indexOf(node.object));
-
-            let childrenItems = await this.getChildrenAsTreeItems(parentNode, objectPath, requestId);
-
-            // if all is good, return true for successful navigation
-            return this.updateTree(this.tempAncestors, childrenItems, requestId);
+            this.treeItems = this.treeItems.filter((checkItem) => {
+                return checkItem.navigationPath === path
+                    || !checkItem.navigationPath.includes(path);
+            });
+            this.openTreeItems.splice(pathIndex, 1);
         },
-        async handleExpanded(node, requestId) {
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
+        closeTreeItem(item) {
+            this.closeTreeItemByPath(item.navigationPath);
+        },
+        // returns an AbortController signal to be passed on to requests
+        startItemLoad(path) {
+            if (this.isItemLoading(path)) {
+                this.abortItemLoad(path);
             }
 
-            this.childrenSlideClass = 'down';
-
-            this.tempAncestors = [...this.ancestors];
-            this.tempAncestors.push(node);
-
-            let objectPath = this.ancestorsAsObjects().concat(node.object);
-
-            let childrenItems = await this.getChildrenAsTreeItems(node, objectPath, requestId);
-
-            // if all is good, return true for successful navigation
-            return this.updateTree(this.tempAncestors, childrenItems, requestId);
+            this.$set(this.treeItemLoading, path, new AbortController());
 
+            return this.treeItemLoading[path].signal;
         },
-        ancestorsAsObjects() {
-            let ancestorsCopy = [...this.ancestors];
-
-            if (this.multipleRootChildren && ancestorsCopy[0].id === 'ROOT') {
-                // no root for object paths
-                ancestorsCopy.shift();
+        endItemLoad(path) {
+            this.$set(this.treeItemLoading, path, undefined);
+            delete this.treeItemLoading[path];
+        },
+        abortItemLoad(path) {
+            if (this.treeItemLoading[path]) {
+                this.treeItemLoading[path].abort();
+                this.endItemLoad(path);
             }
-
-            return ancestorsCopy.map(item => item.object);
         },
-        async buildObjectPathFromString(path, requestId) {
-            let pathNodes = path.split('/');
-            let objectPath = [this.root];
+        isItemLoading(path) {
+            return this.treeItemLoading[path] instanceof AbortController;
+        },
+        showCurrentPathInTree() {
+            const currentPath = this.buildNavigationPath(this.openmct.router.path);
 
-            // skip first element, it's root "browse" path, handled above
-            for (let i = 1; i < pathNodes.length; i++) {
-                let domainObject = await this.openmct.objects.get(pathNodes[i]);
-                objectPath.push(domainObject);
+            if (this.getTreeItemByPath(currentPath)) {
+                this.scrollTo(currentPath);
+            } else {
+                this.openAndScrollTo(currentPath);
+            }
+        },
+        async syncTreeOpenItems() {
+            const items = [...this.treeItems];
 
-                if (!this.isLatestNavigationRequest(requestId)) {
-                    return false;
+            for (let item of items) {
+                if (this.isTreeItemOpen(item)) {
+                    await this.openTreeItem(item);
                 }
             }
-
-            return objectPath;
         },
-        async getChildrenAsTreeItems(item, parentObjectPath, requestId) {
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
+        openAndScrollTo(navigationPath) {
+            let idArray = navigationPath.split('/');
+            let fullPathArray = [];
+            let pathsToOpen;
+
+            this.scrollToPath = navigationPath;
+
+            // skip root
+            idArray.splice(0, 2);
+            idArray[0] = 'browse/' + idArray[0];
+
+            idArray.reduce((parentPath, childPath) => {
+                let fullPath = [parentPath, childPath].join('/');
+
+                fullPathArray.push(fullPath);
+
+                return fullPath;
+            }, '');
+
+            pathsToOpen = fullPathArray.filter(fullPath => !this.isTreeItemPathOpen(fullPath) && fullPath !== navigationPath);
+
+            pathsToOpen.reduce(async (parentLoaded, childPath) => {
+                await parentLoaded;
+
+                return this.openTreeItem(this.getTreeItemByPath(childPath));
+
+            }, Promise.resolve());
+        },
+        scrollToCheck(navigationPath) {
+            if (this.scrollToPath && this.scrollToPath === navigationPath) {
+                this.scrollTo(navigationPath);
+            }
+        },
+        scrollTo(navigationPath) {
+
+            if (this.isItemInView(navigationPath)) {
+                return;
             }
 
-            if (this.composition) {
-                this.composition.off('add', this.addChild);
-                this.composition.off('remove', this.removeChild);
-                delete this.composition;
-            }
+            const indexOfScroll = this.treeItems.findIndex(item => item.navigationPath === navigationPath);
+            const scrollTopAmount = indexOfScroll * this.itemHeight;
 
-            this.childItems = [];
-            let tempComposition = this.openmct.composition.get(item.object);
-            let children = await tempComposition.load();
-
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
-            }
-
-            this.composition = tempComposition;
-
-            return children.map((child) => {
-                return this.buildTreeItem(child, parentObjectPath);
+            this.$refs.scrollable.scrollTo({
+                top: scrollTopAmount,
+                behavior: 'smooth'
             });
         },
-        async updateTree(ancestors, children, requestId) {
-            if (!this.isLatestNavigationRequest(requestId)) {
-                return false;
-            }
-
-            // show or don't show root
-            if (!this.multipleRootChildren && ancestors[0].id === 'ROOT') {
-                ancestors.shift();
-            }
-
-            await this.clearVisibleItems();
-
-            this.ancestors = ancestors;
-            this.childItems = children;
-
-            // track when FIRST full load of tree happens
-            if (!this.initialLoad) {
-                this.initialLoad = true;
-            }
-
-            // any new items added or removed handled here
-            this.composition.on('add', this.addChild);
-            this.composition.on('remove', this.removeChild);
-
-            return true;
+        scrollEndEvent() {
+            this.$nextTick(() => {
+                if (this.scrollToPath) {
+                    if (!this.isItemInView(this.scrollToPath)) {
+                        this.scrollTo(this.scrollToPath);
+                    } else {
+                        this.scrollToPath = undefined;
+                        delete this.scrollToPath;
+                    }
+                }
+            });
         },
-        // domainObject: from composition add event
-        addChild(domainObject) {
-            let item = this.buildTreeItem(domainObject, this.ancestorsAsObjects());
-            this.childItems.push(item);
+        isItemInView(navigationPath) {
+            const indexOfScroll = this.treeItems.findIndex(item => item.navigationPath === navigationPath);
+            const scrollTopAmount = indexOfScroll * this.itemHeight;
+            const treeStart = this.$refs.scrollable.scrollTop;
+            const treeEnd = treeStart + this.mainTreeHeight;
+
+            return scrollTopAmount >= treeStart && scrollTopAmount < treeEnd;
         },
-        removeChild(identifier) {
-            let removeId = this.openmct.objects.makeKeyString(identifier);
-            this.childItems = this.childItems
-                .filter(c => c.id !== removeId);
+        async loadAndBuildTreeItemsFor(domainObject, parentObjectPath, abortSignal) {
+            let collection = this.openmct.composition.get(domainObject);
+            let composition = await collection.load(abortSignal);
+
+            if (parentObjectPath.length) {
+                let navigationPath = this.buildNavigationPath(parentObjectPath);
+
+                if (this.compositionCollections[navigationPath]) {
+                    this.removeCompositionListenerFor(navigationPath);
+                }
+
+                this.compositionCollections[navigationPath] = {};
+                this.compositionCollections[navigationPath].collection = collection;
+                this.compositionCollections[navigationPath].addHandler = this.compositionAddHandler(navigationPath);
+                this.compositionCollections[navigationPath].removeHandler = this.compositionRemoveHandler(navigationPath);
+
+                this.compositionCollections[navigationPath].collection.on('add',
+                    this.compositionCollections[navigationPath].addHandler);
+                this.compositionCollections[navigationPath].collection.on('remove',
+                    this.compositionCollections[navigationPath].removeHandler);
+            }
+
+            return composition.map((object) => {
+                return this.buildTreeItem(object, parentObjectPath);
+            });
+        },
+        buildTreeItem(domainObject, parentObjectPath) {
+            let objectPath = [domainObject].concat(parentObjectPath);
+            let navigationPath = this.buildNavigationPath(objectPath);
+
+            return {
+                id: this.openmct.objects.makeKeyString(domainObject.identifier),
+                object: domainObject,
+                leftOffset: ((objectPath.length - 1) * TREE_ITEM_INDENT_PX) + 'px',
+                objectPath,
+                navigationPath
+            };
+        },
+        buildNavigationPath(objectPath) {
+            return '/browse/' + [...objectPath].reverse()
+                .map((object) => this.openmct.objects.makeKeyString(object.identifier))
+                .join('/');
+        },
+        compositionAddHandler(navigationPath) {
+            return (domainObject) => {
+                let parentItem = this.getTreeItemByPath(navigationPath);
+                let newItem = this.buildTreeItem(domainObject, parentItem.objectPath);
+                let allDescendants = this.getChildrenInTreeFor(parentItem, RETURN_ALL_DESCDNDANTS);
+                let afterItem = allDescendants.length ? allDescendants.pop() : parentItem;
+
+                this.addItemToTreeAfter(newItem, afterItem);
+            };
+        },
+        compositionRemoveHandler(navigationPath) {
+            return (identifier) => {
+                let removeKeyString = this.openmct.objects.makeKeyString(identifier);
+                let parentItem = this.getTreeItemByPath(navigationPath);
+                let directDescendants = this.getChildrenInTreeFor(parentItem);
+                let removeItem = directDescendants.find(item => item.id === removeKeyString);
+
+                this.removeItemFromTree(removeItem);
+            };
+        },
+        removeCompositionListenerFor(navigationPath) {
+            if (this.compositionCollections[navigationPath]) {
+                this.compositionCollections[navigationPath].collection.off('add',
+                    this.compositionCollections[navigationPath].addHandler);
+                this.compositionCollections[navigationPath].collection.off('remove',
+                    this.compositionCollections[navigationPath].removeHandler);
+
+                this.compositionCollections[navigationPath] = undefined;
+                delete this.compositionCollections[navigationPath];
+            }
+        },
+        removeItemFromTree(item) {
+            if (this.isTreeItemOpen(item)) {
+                this.closeTreeItem(item);
+            }
+
+            const removeIndex = this.getTreeItemIndex(item.navigationPath);
+            this.treeItems.splice(removeIndex, 1);
+        },
+        addItemToTreeAfter(addItem, afterItem) {
+            const addIndex = this.getTreeItemIndex(afterItem.navigationPath);
+            this.treeItems.splice(addIndex + 1, 0, addItem);
+
+            if (this.isTreeItemOpen(addItem)) {
+                this.openTreeItem(addItem);
+            }
+        },
+        searchTree(value) {
+            // if an abort controller exists, regardless of the value passed in,
+            // there is an active search that should be cancled
+            if (this.abortSearchController) {
+                this.abortSearchController.abort();
+                delete this.abortSearchController;
+            }
+
+            this.searchValue = value;
+            this.searchLoading = true;
+
+            if (this.searchValue !== '') {
+                // clear any previous search results
+                this.searchResultItems = [];
+
+                this.getSearchResults();
+            } else {
+                this.searchLoading = false;
+            }
+        },
+        getSearchResults() {
+            // an abort controller will be passed in that will be used
+            // to cancel an active searches if necessary
+            this.abortSearchController = new AbortController();
+            const abortSignal = this.abortSearchController.signal;
+
+            const promises = this.openmct.objects.search(this.searchValue, abortSignal)
+                .map(promise => promise
+                    .then(results => this.aggregateSearchResults(results, abortSignal)));
+
+            Promise.all(promises).catch(reason => {
+                // search aborted
+            }).finally(() => {
+                this.searchLoading = false;
+
+                if (this.abortSearchController) {
+                    delete this.abortSearchController;
+                }
+            });
+        },
+        aggregateSearchResults(results, abortSignal) {
+            let resultPromises = [];
+
+            for (const result of results) {
+                if (!abortSignal.aborted) {
+                    resultPromises.push(this.openmct.objects.getOriginalPath(result.identifier).then((objectPath) => {
+                        // removing the item itself, as the path we pass to buildTreeItem is a parent path
+                        objectPath.shift();
+
+                        // if root, remove, we're not using in object path for tree
+                        let lastObject = objectPath.length ? objectPath[objectPath.length - 1] : false;
+                        if (lastObject && lastObject.type === 'root') {
+                            objectPath.pop();
+                        }
+
+                        this.searchResultItems.push(this.buildTreeItem(result, objectPath));
+                    }));
+                }
+            }
+
+            return resultPromises;
         },
         updateVisibleItems() {
+            this.scrollEndEvent();
+
             if (this.updatingView) {
                 return;
             }
@@ -543,7 +607,6 @@ export default {
 
                 this.itemOffset = start;
                 this.visibleItems = this.focusedItems.slice(start, end);
-
                 this.updatingView = false;
             });
         },
@@ -565,234 +628,6 @@ export default {
 
             return Math.ceil(scrollBottom / this.itemHeight);
         },
-        scrollItems(event) {
-            this.updateVisibleItems();
-        },
-        handleWindowResize() {
-            this.calculateHeights();
-        },
-        // domainObject: we're building a tree item for this
-        // objects: domainObject array up to parent of domainObject, excluding domainObject for item being built
-        buildTreeItem(domainObject, objects) {
-            let objectPath = [...objects];
-
-            // remove root (if present) for object path
-            if (objectPath[0] && objectPath[0].type === 'root') {
-                objectPath.shift();
-            }
-
-            let navigationPath = this.buildNavigationPath(domainObject, objectPath);
-            let builtObjectPath = [...objectPath].reverse();
-
-            return {
-                id: this.openmct.objects.makeKeyString(domainObject.identifier),
-                object: domainObject,
-                objectPath: [domainObject].concat(builtObjectPath),
-                navigationPath
-            };
-        },
-        // domainObject: the item we're building the path for (will be used in url and links)
-        // objects: array of domainObjects representing path to domainobject passed in
-        buildNavigationPath(domainObject, objects) {
-            let path = [...objects]
-                .map(object => this.openmct.objects.makeKeyString(object.identifier));
-
-            return '/' + [
-                ROOT_PATH,
-                ...path,
-                this.openmct.objects.makeKeyString(domainObject.identifier)
-            ].join('/');
-        },
-        observeAncestors() {
-            let observedAncestorIds = Object.keys(this.observedAncestors);
-
-            // observe any ancestors, not currently being observed
-            this.ancestors.forEach((ancestor, index) => {
-                // skip last ancestor as it's children are currently being watched
-                if (index !== this.ancestors.length - 1) {
-                    let ancestorKeyString = this.openmct.objects.makeKeyString(ancestor.object.identifier);
-                    let ancestorIndex = observedAncestorIds.indexOf(ancestorKeyString);
-
-                    if (ancestorIndex !== -1) { // currently observed
-                        observedAncestorIds.splice(ancestorIndex, 1); // remove all active ancestors from id tracking
-                    } else { // not observed, observe it
-                        this.observeAncestor(ancestorKeyString, ancestor);
-                    }
-                }
-            });
-
-            // remove any ancestors currnetly being observed that are no longer active ancestors
-            this.stopObservingAncestors(observedAncestorIds);
-        },
-        stopObservingAncestors(ids = Object.keys(this.observedAncestors)) {
-            ids.forEach((id) => {
-                this.observedAncestors[id].composition.off('add', this.observedAncestors[id].addChild);
-                this.observedAncestors[id].composition.off('remove', this.observedAncestors[id].removeChild);
-                this.observedAncestors[id].removeChild = undefined;
-                this.observedAncestors[id].addChild = undefined;
-                this.observedAncestors[id].composition = undefined;
-
-                // remove tracking for this id
-                this.observedAncestors[id] = undefined;
-                delete this.observedAncestors[id];
-            });
-        },
-        async observeAncestor(id, ancestorNode) {
-            this.observedAncestors[id] = {};
-
-            this.observedAncestors[id].composition = this.openmct.composition.get(ancestorNode.object);
-            await this.observedAncestors[id].composition.load();
-            this.observedAncestors[id].addChild = this.ancestorAdd(ancestorNode);
-            this.observedAncestors[id].removeChild = this.ancestorRemove(ancestorNode);
-            this.observedAncestors[id].composition.on('add', this.observedAncestors[id].addChild);
-            this.observedAncestors[id].composition.on('remove', this.observedAncestors[id].removeChild);
-            // }
-        },
-        ancestorAdd(ancestor) {
-            return (node) => {
-                // no use case for this as of yet since ancestors do not show siblings
-                // and the main ancestor being viewed currently has it's composition watched elsewhere
-            };
-        },
-        ancestorRemove(ancestorNode) {
-            return (identifier) => {
-                // check if this item is showing in the tree currently
-                let index = this.ancestors.findIndex(treeAncestor => {
-                    let treeAncestorIdentifier = this.openmct.objects.makeKeyString(treeAncestor.object.identifier);
-                    let removedItemIdentifier = this.openmct.objects.makeKeyString(identifier);
-
-                    return treeAncestorIdentifier === removedItemIdentifier;
-                });
-
-                if (index !== -1) {
-                    let ancestorIndex = this.ancestors.indexOf(ancestorNode);
-                    this.beginNavigationRequest('handleReset', this.ancestors[ancestorIndex]);
-                }
-            };
-        },
-        autoScroll() {
-            if (this.currentPathIsActivePath() && !this.skipScroll && this.$refs.scrollable) {
-                let indexOfScroll = this.indexOfItemById(this.currentlyViewedObjectId());
-                let scrollTopAmount = indexOfScroll * this.itemHeight;
-                this.$refs.scrollable.scrollTo({
-                    top: scrollTopAmount,
-                    behavior: 'smooth'
-                });
-            }
-        },
-        indexOfItemById(id) {
-            for (let i = 0; i < this.childItems.length; i++) {
-                if (this.childItems[i].id === id) {
-                    return i;
-                }
-            }
-        },
-        getSearchResults() {
-            // clear any previous search results
-            this.searchResultItems = [];
-
-            // an abort controller will be passed in that will be used
-            // to cancel an active searches if necessary
-            this.abortController = new AbortController();
-            const abortSignal = this.abortController.signal;
-
-            const promises = this.openmct.objects.search(this.searchValue, abortSignal)
-                .map(promise => promise
-                    .then(results => this.aggregateSearchResults(results, abortSignal)));
-
-            Promise.all(promises).then(() => {
-                this.searchLoading = false;
-            }).catch(reason => {
-                // search aborted
-            }).finally(() => {
-                if (this.abortController) {
-                    delete this.abortController;
-                }
-            });
-        },
-        aggregateSearchResults(results, abortSignal) {
-            for (const result of results) {
-                if (!abortSignal.aborted) {
-                    this.openmct.objects.getOriginalPath(result.identifier).then((objectPath) => {
-                        // removing the item itself, as the path we pass to buildTreeItem is a parent path
-                        objectPath.shift();
-
-                        // if root, remove, we're not using in object path for tree
-                        let lastObject = objectPath.length ? objectPath[objectPath.length - 1] : false;
-                        if (lastObject && lastObject.type === 'root') {
-                            objectPath.pop();
-                        }
-
-                        // we reverse the objectPath in the tree, so have to do it here first,
-                        // since this one is already in the correct direction
-                        let resultObject = this.buildTreeItem(result, objectPath.reverse());
-
-                        this.searchResultItems.push(resultObject);
-                    });
-                }
-            }
-        },
-        searchTree(value) {
-            // if an abort controller exists, regardless of the value passed in,
-            // there is an active search that should be cancled
-            if (this.abortController) {
-                this.abortController.abort();
-                delete this.abortController;
-            }
-
-            this.searchValue = value;
-            this.searchLoading = true;
-
-            if (this.searchValue !== '') {
-                this.getSearchResults();
-            } else {
-                this.searchLoading = false;
-            }
-        },
-        currentPathIsActivePath() {
-            return this.currentTreePath === this.currentlyViewedObjectParentPath();
-        },
-        currentlyViewedObjectId() {
-            let currentPath = this.openmct.router.currentLocation.path;
-            if (currentPath) {
-                return currentPath.split('/').pop();
-            }
-        },
-        currentlyViewedObjectParentPath() {
-            let currentPath = this.openmct.router.currentLocation.path;
-
-            if (currentPath) {
-                currentPath = currentPath.split('/');
-                currentPath.shift(); // remove empty array element from initial '/'
-                currentPath.pop(); // remove current child
-
-                return currentPath.join('/');
-            }
-        },
-        async clearVisibleItems() {
-            this.visibleItems = [];
-            await this.$nextTick(); // prevents "ghost" image of visibleItems
-
-            return;
-        },
-        childrenListStyles() {
-            return { position: 'relative' };
-        },
-        scrollableStyles() {
-            let height = this.availableContainerHeight + 'px';
-
-            return { height };
-        },
-        getElementStyleValue(el, style) {
-            if (!el) {
-                return;
-            }
-
-            let styleString = window.getComputedStyle(el)[style];
-            let index = styleString.indexOf('px');
-
-            return Number(styleString.slice(0, index));
-        },
         calculateHeights() {
             const RECHECK = 100;
 
@@ -822,6 +657,54 @@ export default {
 
                 checkHeights();
             });
+        },
+        getTreeItemByPath(path) {
+            return this.treeItems.find(item => item.navigationPath === path);
+        },
+        getTreeItemIndex(indexItem) {
+            let path = typeof indexItem === 'string' ? indexItem : indexItem.navigationPath;
+
+            return this.treeItems.findIndex(item => item.navigationPath === path);
+        },
+        getChildrenInTreeFor(parent, allDescendants = false) {
+            const parentPath = typeof parent === 'string' ? parent : parent.navigationPath;
+            const parentDepth = parentPath.split('/').length;
+
+            return this.treeItems.filter((childItem) => {
+                const childDepth = childItem.navigationPath.split('/').length;
+                if (!allDescendants && childDepth > parentDepth + 1) {
+                    return false;
+                }
+
+                return childItem.navigationPath !== parentPath
+                && childItem.navigationPath.includes(parentPath);
+            });
+        },
+        isTreeItemOpen(item) {
+            return this.isTreeItemPathOpen(item.navigationPath);
+        },
+        isTreeItemPathOpen(path) {
+            return this.openTreeItems.includes(path);
+        },
+        getElementStyleValue(el, style) {
+            if (!el) {
+                return;
+            }
+
+            let styleString = window.getComputedStyle(el)[style];
+            let index = styleString.indexOf('px');
+
+            return Number(styleString.slice(0, index));
+        },
+        getSavedOpenItems() {
+            let openItems = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
+            this.openTreeItems = openItems ? JSON.parse(openItems) : [];
+        },
+        setSavedOpenItems() {
+            localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(this.openTreeItems));
+        },
+        handleWindowResize() {
+            this.calculateHeights();
         }
     }
 };
diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue
index f3162acde3..b4a06526be 100644
--- a/src/ui/layout/tree-item.vue
+++ b/src/ui/layout/tree-item.vue
@@ -1,9 +1,6 @@
 <template>
 <div
-    :style="{
-        'top': virtualScroll ? itemTop : 'auto',
-        'position': virtualScroll ? 'absolute' : 'relative'
-    }"
+    :style="treeItemStyles"
     class="c-tree__item-h"
 >
     <div
@@ -17,28 +14,23 @@
         @contextmenu.capture="handleContextMenu"
     >
         <view-control
-            ref="navUp"
-            v-model="expanded"
+            ref="navigate"
             class="c-tree__item__view-control"
-            :control-class="'icon-arrow-nav-to-parent'"
-            :enabled="showUp"
-            @input="resetTreeHere"
+            :value="isOpen || isLoading"
+            :enabled="!activeSearch && hasComposition"
+            @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
-            ref="navDown"
-            v-model="expanded"
-            class="c-tree__item__view-control"
-            :control-class="'c-nav__down'"
-            :enabled="hasComposition && showDown"
-        />
+        <span
+            v-if="isLoading"
+            class="loading"
+        ></span>
     </div>
 </div>
 </template>
@@ -59,17 +51,13 @@ export default {
             type: Object,
             required: true
         },
-        leftOffset: {
-            type: String,
-            default: '0px'
-        },
-        showUp: {
+        activeSearch: {
             type: Boolean,
             default: false
         },
-        showDown: {
-            type: Boolean,
-            default: true
+        leftOffset: {
+            type: String,
+            default: '0px'
         },
         itemIndex: {
             type: Number,
@@ -86,9 +74,13 @@ export default {
             required: false,
             default: 0
         },
-        virtualScroll: {
-            type: Boolean,
-            default: false
+        openItems: {
+            type: Array,
+            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() {
-            return (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
-        }
-    },
-    watch: {
-        expanded() {
-            this.$emit('expanded', this.domainObject);
+        isLoading() {
+            return Boolean(this.loadingItems[this.navigationPath]);
+        },
+        isOpen() {
+            return this.openItems.includes(this.navigationPath);
+        },
+        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 (objectComposition) {
+        if (this.openmct.composition.get(this.domainObject)) {
             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;
         }