[Search] SearchProvider and Tree Search enhancements/fixes (#3400)

* update generic search compostion load to new version for testing

* logging

* removing logging adding check for undefined child

* reverting genericsearchprovider

* testing using object service instead of modelservice for search

* modified the animations for sliding children in and out to be more reliable, pr updates

* removing unneccessary code

platform/search/bundle.js

@@ -104,7 +104,7 @@ define([
                         "depends": [
                             "$q",
                             "$log",
-                            "modelService",
+                            "objectService",
                             "workerService",
                             "topic",
                             "GENERIC_SEARCH_ROOTS",

platform/search/src/services/GenericSearchProvider.js

@@ -38,16 +38,16 @@ define([
      * @constructor
      * @param $q Angular's $q, for promise consolidation.
      * @param $log Anglar's $log, for logging.
-     * @param {ModelService} modelService the model service.
+     * @param {ObjectService} objectService the object service.
      * @param {WorkerService} workerService the workerService.
      * @param {TopicService} topic the topic service.
      * @param {Array} ROOTS An array of object Ids to begin indexing.
      */
-    function GenericSearchProvider($q, $log, modelService, workerService, topic, ROOTS, USE_LEGACY_INDEXER, openmct) {
+    function GenericSearchProvider($q, $log, objectService, workerService, topic, ROOTS, USE_LEGACY_INDEXER, openmct) {
         var provider = this;
         this.$q = $q;
         this.$log = $log;
-        this.modelService = modelService;
+        this.objectService = objectService;
         this.openmct = openmct;
 
         this.indexedIds = {};
@@ -218,12 +218,12 @@ define([
             provider = this;
 
         this.pendingRequests += 1;
-        this.modelService
+        this.objectService
-            .getModels([idToIndex])
+            .getObjects([idToIndex])
-            .then(function (models) {
+            .then(function (objects) {
                 delete provider.pendingIndex[idToIndex];
-                if (models[idToIndex]) {
+                if (objects[idToIndex]) {
-                    provider.index(idToIndex, models[idToIndex]);
+                    provider.index(idToIndex, objects[idToIndex].model);
                 }
             }, function () {
                 provider

src/ui/layout/mct-tree.scss

@@ -248,20 +248,14 @@
 }
 
 // TRANSITIONS
-.slide-left,
+.children-enter-active {
-.slide-right {
+    &.down {
-    animation-duration: 500ms;
+        animation: animSlideLeft 500ms;
-    animation-iteration-count: 1;
+    }
-    transition: all;
-    transition-timing-function: ease-in-out;
-}
 
-.slide-left {
+    &.up {
-    animation-name: animSlideLeft;
+        animation: animSlideRight 500ms;
-}
+    }
-
-.slide-right {
-    animation-name: animSlideRight;
 }
 
 @keyframes animSlideLeft {

src/ui/layout/mct-tree.vue

@@ -13,8 +13,17 @@
         />
     </div>
 
+    <!-- search loading -->
+    <li
+        v-if="searchLoading && activeSearch"
+        class="c-tree__item c-tree-and-search__loading loading"
+    >
+        <span class="c-tree__item__label">Searching...</span>
+    </li>
+
+    <!-- no results -->
     <div
-        v-if="(searchValue && allTreeItems.length === 0 && !isLoading) || (searchValue && searchResultItems.length === 0)"
+        v-if="(searchValue && searchResultItems.length === 0 && !searchLoading)"
         class="c-tree-and-search__no-results"
     >
         No results found
@@ -48,14 +57,16 @@
             </li>
             <!-- end loading -->
         </div>
+
         <!-- currently viewed children -->
         <transition
-            @enter="childrenIn"
+            name="children"
+            appear
         >
             <li
-                v-if="!isLoading"
+                v-if="!isLoading && !searchLoading"
-                :class="childrenSlideClass"
                 :style="childrenListStyles()"
+                :class="childrenSlideClass"
             >
                 <ul
                     ref="scrollable"
@@ -77,7 +88,7 @@
                             @expanded="handleExpanded"
                         />
                         <li
-                            v-if="visibleItems.length === 0 && !noVisibleItems"
+                            v-if="visibleItems.length === 0 && !noVisibleItems && !activeSearch"
                             :style="indicatorLeftOffset"
                             class="c-tree__item c-tree__item--empty"
                         >
@@ -93,6 +104,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import treeItem from './tree-item.vue';
 import search from '../components/search.vue';
 
@@ -123,12 +135,13 @@ export default {
 
         return {
             isLoading: false,
+            searchLoading: false,
             searchValue: '',
             allTreeItems: [],
             searchResultItems: [],
             visibleItems: [],
             ancestors: [],
-            childrenSlideClass: 'slide-left',
+            childrenSlideClass: 'down',
             availableContainerHeight: 0,
             noScroll: true,
             updatingView: false,
@@ -271,6 +284,9 @@ export default {
             this.getAllChildren(rootNode);
         }
     },
+    created() {
+        this.getSearchResults = _.debounce(this.getSearchResults, 400);
+    },
     destroyed() {
         window.removeEventListener('resize', this.handleWindowResize);
         this.stopObservingAncestors();
@@ -511,6 +527,7 @@ export default {
 
             this.autoScroll();
             this.isLoading = false;
+            this.setContainerHeight();
         },
         async jumpToPath(saveExpandedPath = false) {
             // switching back and forth between multiple root children can cause issues,
@@ -596,20 +613,25 @@ export default {
                     navigateToParent
                 };
             });
+            this.searchLoading = false;
         },
         searchTree(value) {
             this.searchValue = value;
+            this.searchLoading = true;
 
             if (this.searchValue !== '') {
                 this.getSearchResults();
+            } else {
+                this.searchLoading = false;
             }
         },
         searchActivated() {
             this.activeSearch = true;
             this.$refs.scrollable.scrollTop = 0;
         },
-        searchDeactivated() {
+        async searchDeactivated() {
             this.activeSearch = false;
+            await this.$nextTick();
             this.$refs.scrollable.scrollTop = 0;
             this.setContainerHeight();
         },
@@ -618,7 +640,7 @@ export default {
                 return;
             }
 
-            this.childrenSlideClass = 'slide-right';
+            this.childrenSlideClass = 'up';
             this.ancestors.splice(this.ancestors.indexOf(node) + 1);
             this.getAllChildren(node);
             this.setCurrentNavigatedPath();
@@ -628,7 +650,7 @@ export default {
                 return;
             }
 
-            this.childrenSlideClass = 'slide-left';
+            this.childrenSlideClass = 'down';
             let newParent = this.buildTreeItem(node);
             this.ancestors.push(newParent);
             this.getAllChildren(newParent);
@@ -684,11 +706,6 @@ export default {
                 overflow: this.noScroll ? 'hidden' : 'scroll'
             };
         },
-        childrenIn(el, done) {
-            // still needing this timeout for some reason
-            window.setTimeout(this.setContainerHeight, RECHECK_DELAY);
-            done();
-        },
         getElementStyleValue(el, style) {
             let styleString = window.getComputedStyle(el)[style];
             let index = styleString.indexOf('px');