merge changes, fix various issues

scripts/system/html/js/entityList.js

@@ -1,7 +1,7 @@
-//  entityListNew.js
+//  entityList.js
 //
-//  Created by David Back on 27 Aug 2018
+//  Created by Ryan Huffman on 19 Nov 2014
-//  Copyright 2018 High Fidelity, Inc.
+//  Copyright 2014 High Fidelity, Inc.
 //
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -10,6 +10,21 @@ const ASCENDING_SORT = 1;
 const DESCENDING_SORT = -1;
 const ASCENDING_STRING = '▴';
 const DESCENDING_STRING = '▾';
+const LOCKED_GLYPH = "";
+const VISIBLE_GLYPH = "";
+const TRANSPARENCY_GLYPH = "";
+const BAKED_GLYPH = ""
+const SCRIPT_GLYPH = "k";
+const BYTES_PER_MEGABYTE = 1024 * 1024;
+const IMAGE_MODEL_NAME = 'default-image-model.fbx';
+const COLLAPSE_EXTRA_INFO = "E";
+const EXPAND_EXTRA_INFO = "D";
+const FILTER_IN_VIEW_ATTRIBUTE = "pressed";
+const WINDOW_NONVARIABLE_HEIGHT = 206;
+const NUM_COLUMNS = 12;
+const DELETE = 46; // Key code for the delete key.
+const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
+
 const COMPARE_ASCENDING = function(a, b) {
     let va = a[currentSortColumn];
     let vb = b[currentSortColumn];
@@ -24,29 +39,27 @@ const COMPARE_ASCENDING = function(a, b) {
 const COMPARE_DESCENDING = function(a, b) {
     return COMPARE_ASCENDING(b, a);
 }
-const LOCKED_GLYPH = "";
-const VISIBLE_GLYPH = "";
-const TRANSPARENCY_GLYPH = "";
-const BAKED_GLYPH = ""
-const SCRIPT_GLYPH = "k";
-const BYTES_PER_MEGABYTE = 1024 * 1024;
-const IMAGE_MODEL_NAME = 'default-image-model.fbx';
-const NUM_COLUMNS = 12;
 
-var entities = [];
+// List of all entities
+let entities = []
+// List of all entities, indexed by Entity ID
 var entitiesByID = {};
+// The filtered and sorted list of entities
 var visibleEntities = [];
 
+var entityList = null;
 var selectedEntities = [];
-
 var currentSortColumn = 'type';
 var currentSortOrder = 'des';
+var isFilterInView = false;
+var showExtraInfo = false;
 
-var entityList = null;
+const ENABLE_PROFILING = false;
-
-const ENABLE_PROFILING = true;
 var profileIndent = '';
-const PROFILE = !ENABLE_PROFILING ? function() { } : function(name, fn, args) {
+const PROFILE_NOOP = function(_name, fn, args) {
+    fn.apply(this, args);
+} ;
+const PROFILE = !ENABLE_PROFILING ? PROFILE_NOOP : function(name, fn, args) {
     console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
     var previousIndent = profileIndent;
     profileIndent += '  ';
@@ -83,6 +96,7 @@ function loaded() {
         elNoEntitiesMessage = document.getElementById("no-entities");
         elNoEntitiesInView = document.getElementById("no-entities-in-view");
         elNoEntitiesRadius = document.getElementById("no-entities-radius");
+        elNoEntitiesInView.style.display = "none";
 
         entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRowFunction, updateRowFunction, clearRowFunction);
         
@@ -122,7 +136,6 @@ function loaded() {
         document.getElementById("entity-hasScript").onclick = function () {
             setSortColumn('hasScript');
         };
-        
         elRefresh.onclick = function() {
             refreshEntities();
         }
@@ -141,78 +154,21 @@ function loaded() {
         elDelete.onclick = function() {
             EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
         }
-
+        elFilter.onkeyup = refreshEntityList;
-        function createRowFunction(elBottomBuffer) {
+        elFilter.onpaste = refreshEntityList;
-            var row = document.createElement("tr");
+        elFilter.onchange = onFilterChange;
-            for (var i = 0; i < NUM_COLUMNS; i++) {
+        elFilter.onblur = refreshFooter;
-                var column = document.createElement("td");
+        elInView.onclick = toggleFilterInView;
-                // locked, visible, hasTransparent, isBaked glyph columns
+        elRadius.onchange = onRadiusChange;
-                if (i === 3 || i === 4 || i === 8 || i === 9) {
+        elInfoToggle.onclick = toggleInfo;
-                    column.className = 'glyph';
+        window.onresize = resize;
-                }
-                row.appendChild(column);
-            }
-            row.onclick = onRowClicked;
-            row.ondblclick = onRowDoubleClicked;
-            elEntityTableBody.insertBefore(row, elBottomBuffer);
-            return row;
-        }
-        
-        function updateRowFunction(elRow, itemData) {
-            var typeCell = elRow.childNodes[0];
-            typeCell.innerText = itemData.type;
-            var nameCell = elRow.childNodes[1];
-            nameCell.innerText = itemData.name;
-            var urlCell = elRow.childNodes[2];
-            urlCell.innerText = itemData.url;
-            var lockedCell = elRow.childNodes[3];
-            lockedCell.innerHTML = itemData.locked;
-            var visibleCell = elRow.childNodes[4];
-            visibleCell.innerHTML = itemData.visible;
-            var verticesCountCell = elRow.childNodes[5];
-            verticesCountCell.innerText = itemData.verticesCount;
-            var texturesCountCell = elRow.childNodes[6];
-            texturesCountCell.innerText = itemData.texturesCount;
-            var texturesSizeCell = elRow.childNodes[7];
-            texturesSizeCell.innerText = itemData.texturesSize;
-            var hasTransparentCell = elRow.childNodes[8];
-            hasTransparentCell.innerHTML = itemData.hasTransparent;
-            var isBakedCell = elRow.childNodes[9];
-            isBakedCell.innerHTML = itemData.isBaked;
-            var drawCallsCell = elRow.childNodes[10];
-            drawCallsCell.innerText = itemData.drawCalls;
-            var hasScriptCell = elRow.childNodes[11];
-            hasScriptCell.innerText = itemData.hasScript;
-            
-            var prevItemId = elRow.getAttribute("id");
-            var newItemId = itemData.id;
-            if (prevItemId && prevItemId !== newItemId) {
-                entitiesByID[prevItemId].elRow = null;
-            }
-            if (!prevItemId || prevItemId !== newItemId) {
-                elRow.setAttribute("id", newItemId);
-                entitiesByID[newItemId].elRow = elRow;
-            }
-        }
-        
-        function clearRowFunction(elRow) {
-            for (var i = 0; i < NUM_COLUMNS; i++) {
-                var cell = elRow.childNodes[i];
-                cell.innerHTML = "";
-            }
-
-            var id = elRow.getAttribute("id");
-            if (id && entitiesByID[id]) {
-                entitiesByID[id].elRow = null;
-            }
-        }
         
         function onRowClicked(clickEvent) {
-            var entityID = this.getAttribute("id");
+            let entityID = this.getAttribute("id");
-            var selection = [entityID];
+            let selection = [entityID];
 
             if (clickEvent.ctrlKey) {
-                var selectedIndex = selectedEntities.indexOf(entityID);
+                let selectedIndex = selectedEntities.indexOf(entityID);
                 if (selectedIndex >= 0) {
                     selection = selectedEntities;
                     selection.splice(selectedIndex, 1)
@@ -220,22 +176,21 @@ function loaded() {
                     selection = selection.concat(selectedEntities);
                 }
             } else if (clickEvent.shiftKey && selectedEntities.length > 0) {
-                var previousItemFound = -1;
+                let previousItemFound = -1;
-                var clickedItemFound = -1;
+                let clickedItemFound = -1;
-                for (var i = 0; i < visibleEntities.length; i++) {
+                for (let i = 0; i < visibleEntities.length; i++) {
-                    var entity = visibleEntities[i];
+                    let entity = visibleEntities[i];
-                    if (clickedItemFound === -1 && entityID == entity.id) {
+                    if (clickedItemFound === -1 && entityID === entity.id) {
                         clickedItemFound = i;
-                    } else if(previousItemFound === -1 && selectedEntities[0] == entity.id) {
+                    } else if(previousItemFound === -1 && selectedEntities[0] === entity.id) {
                         previousItemFound = i;
                     }
                 }
                 if (previousItemFound !== -1 && clickedItemFound !== -1) {
-                    var betweenItems = [];
+                    let betweenItems = [];
-                    var toItem = Math.max(previousItemFound, clickedItemFound);
+                    let toItem = Math.max(previousItemFound, clickedItemFound);
                     // skip first and last item in this loop, we add them to selection after the loop
-                    for (var i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
+                    for (let i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
-                        visibleEntities[i].elRow.className = 'selected';
                         betweenItems.push(visibleEntities[i].id);
                     }
                     if (previousItemFound > clickedItemFound) {
@@ -246,9 +201,7 @@ function loaded() {
                 }
             }
             
-            selectedEntities = selection;
+            updateSelectedEntities(selection);
-
-            this.className = 'selected';
 
             EventBridge.emitWebEvent(JSON.stringify({
                 type: "selectionUpdate",
@@ -268,6 +221,119 @@ function loaded() {
             }));
         }
         
+        function decimalMegabytes(number) {
+            return number ? (number / BYTES_PER_MEGABYTE).toFixed(1) : "";
+        }
+
+        function displayIfNonZero(number) {
+            return number ? number : "";
+        }
+
+        function getFilename(url) {
+            let urlParts = url.split('/');
+            return urlParts[urlParts.length - 1];
+        }
+        
+        function updateEntityData(entityData) {
+            entities = [];
+            entitiesByID = {};
+            visibleEntities = [];
+            
+            PROFILE("map-data", function() {
+                entityData.forEach(function(entity) {
+                    let type = entity.type
+                    let filename = getFilename(entity.url);
+                    if (filename === IMAGE_MODEL_NAME) {
+                        type = "Image";
+                    }
+            
+                    let entityData = {
+                        id: entity.id,
+                        name: entity.name,
+                        type: type,
+                        url: filename,
+                        fullUrl: entity.url,
+                        locked: entity.locked ? LOCKED_GLYPH : null,
+                        visible: entity.visible ? VISIBLE_GLYPH : null,
+                        verticesCount: displayIfNonZero(entity.verticesCount),
+                        texturesCount: displayIfNonZero(entity.texturesCount),
+                        texturesSize: decimalMegabytes(entity.texturesSize),
+                        hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null,
+                        isBaked: entity.isBaked ? BAKED_GLYPH : null,
+                        drawCalls: displayIfNonZero(entity.drawCalls),
+                        hasScript: entity.hasScript ? SCRIPT_GLYPH : null,
+                        elRow : null
+                    }
+                    
+                    entities.push(entityData);
+                    entitiesByID[entityData.id] = entityData;
+                });
+            });
+        }
+        
+        function refreshEntityList() {
+            PROFILE("refresh-entity-list", function() {
+                PROFILE("filter", function() {
+                    let searchTerm = elFilter.value;
+                    if (searchTerm === '') {
+                        visibleEntities = entities.slice(0);
+                    } else {
+                        visibleEntities = entities.filter(function(e) {
+                            return e.name.indexOf(searchTerm) > -1
+                                || e.type.indexOf(searchTerm) > -1
+                                || e.fullUrl.indexOf(searchTerm) > -1;
+                        });
+                    }
+                });
+                
+                PROFILE("sort", function() {
+                    let cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING;
+                    visibleEntities.sort(cmp);
+                });
+
+                PROFILE("update-dom", function() {
+                    entityList.setVisibleItemData(visibleEntities);
+                    entityList.refresh();
+                });
+                
+                refreshFooter();
+            });
+        }
+        
+        function removeEntities(deletedIDs) {
+            // Loop from the back so we can pop items off while iterating
+            for (let j = entities.length - 1; j >= 0; --j) {
+                let id = entities[j];
+                for (let i = 0, length = deletedIDs.length; i < length; ++i) {
+                    if (id === deletedIDs[i]) {
+                        entities.splice(j, 1);
+                        entitiesByID[id].el.remove();
+                        delete entitiesByID[id];
+                        break;
+                    }
+                }
+            }
+            refreshEntities();
+        }
+        
+        function clearEntities() {
+            var firstVisibleRow = entityList.getRowOffset();
+            var lastVisibleRow = firstVisibleRow + entityList.getNumRows() - 1;
+            for (var i = firstVisibleRow; i <= lastVisibleRow && i < visibleEntities.length; i++) {
+                var entity = visibleEntities[i];
+                entity.elRow.setAttribute("id", "");
+            }
+            
+            entities = [];
+            entitiesByID = {};
+            visibleEntities = [];
+            
+            entityList.setVisibleItemData([]);
+            entityList.refresh();
+            
+            refreshFooter();
+        }
+        
         var elSortOrder = {
             name: document.querySelector('#entity-name .sort-order'),
             type: document.querySelector('#entity-type .sort-order'),
@@ -296,9 +362,12 @@ function loaded() {
             });
         }
         
-        function clearEntities() {
+        function refreshEntities(resetRowOffset) {
-            entities = {};
+            clearEntities();
-            refreshFooter();
+            if (resetRowOffset) {
+                entityList.resetRowOffset();
+            }
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
         }
         
         function refreshFooter() {
@@ -313,105 +382,31 @@ function loaded() {
             }
         }
         
-        function refreshEntities() {
-            clearEntities();
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
-        }
-
-        function refreshEntityList() {
-            PROFILE("refresh-entity-list", function() {
-                PROFILE("filter", function() {
-                    var searchTerm = elFilter.value;
-                    if (searchTerm === '') {
-                        visibleEntities = entities.slice(0);
-                    } else {
-                        visibleEntities = entities.filter(function(e) {
-                            return e.name.indexOf(searchTerm) > -1
-                                || e.type.indexOf(searchTerm) > -1
-                                || e.fullUrl.indexOf(searchTerm) > -1;
-                        });
-                    }
-                });
-                
-                PROFILE("sort", function() {
-                    var cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING;
-                    visibleEntities.sort(cmp);
-                });
-
-                PROFILE("update-dom", function() {
-                    entityList.setVisibleItemData(visibleEntities);
-                    entityList.refresh();
-                });
-                
-                refreshFooter();
-            });
-        }
-        
-        function decimalMegabytes(number) {
-            return number ? (number / BYTES_PER_MEGABYTE).toFixed(1) : "";
-        }
-
-        function displayIfNonZero(number) {
-            return number ? number : "";
-        }
-
-        function getFilename(url) {
-            var urlParts = url.split('/');
-            return urlParts[urlParts.length - 1];
-        }
-        
-        function updateEntityData(entityData) {
-            entities = [];
-            entitiesByID = {};
-            visibleEntities = [];
-            
-            PROFILE("map-data", function() {
-                entityData.forEach(function(entity) {
-                    var type = entity.type
-                    var filename = getFilename(entity.url);
-                    if (filename === IMAGE_MODEL_NAME) {
-                        type = "Image";
-                    }
-            
-                    var entityData = {
-                        id: entity.id,
-                        name: entity.name,
-                        type: type,
-                        url: filename,
-                        fullUrl: entity.url,
-                        locked: entity.locked ? LOCKED_GLYPH : null,
-                        visible: entity.visible ? VISIBLE_GLYPH : null,
-                        verticesCount: displayIfNonZero(entity.verticesCount),
-                        texturesCount: displayIfNonZero(entity.texturesCount),
-                        texturesSize: decimalMegabytes(entity.texturesSize),
-                        hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null,
-                        isBaked: entity.isBaked ? BAKED_GLYPH : null,
-                        drawCalls: displayIfNonZero(entity.drawCalls),
-                        hasScript: entity.hasScript ? SCRIPT_GLYPH : null,
-                        elRow : null
-                    }
-                    
-                    entities.push(entityData);
-                    entitiesByID[entityData.id] = entityData;
-                });
-            });
-        }
-
         function updateSelectedEntities(selectedIDs) {
-            var notFound = false;
+            let notFound = false;
-            for (var id in entitiesByID) {
+            
-                if (entitiesByID[id].elRow) {
+            let firstVisibleRow = entityList.getRowOffset();
-                    entitiesByID[id].elRow.className = '';
+            let lastVisibleRow = firstVisibleRow + entityList.getNumRows() - 1;
+            for (let i = firstVisibleRow; i <= lastVisibleRow && i < visibleEntities.length; i++) {
+                let entity = visibleEntities[i];
+                entity.elRow.className = '';
             }
+            
+            for (let i = 0; i < selectedEntities.length; i++) {
+                let id = selectedEntities[i];
+                entitiesByID[id].selected = false;
             }
 
             selectedEntities = [];
-            for (var i = 0; i < selectedIDs.length; i++) {
+            for (let i = 0; i < selectedIDs.length; i++) {
-                var id = selectedIDs[i];
+                let id = selectedIDs[i];
+                entitiesByID[id].selected = true;
                 selectedEntities.push(id);
                 if (id in entitiesByID) {
-                    var entity = entitiesByID[id];
+                    let entity = entitiesByID[id];
+                    if (entity.elRow) {
                         entity.elRow.className = 'selected';
+                    }
                 } else {
                     notFound = true;
                 }
@@ -422,14 +417,82 @@ function loaded() {
             return notFound;
         }
         
-        function removeEntities(deletedIDs) {
+        function createRowFunction() {
-            for (var i = 0, length = deletedIDs.length; i < length; i++) {
+            var row = document.createElement("tr");
-                var deleteID = deletedIDs[i];
+            for (var i = 0; i < NUM_COLUMNS; i++) {
-                delete entitiesByID[deleteID];
+                var column = document.createElement("td");
+                // locked, visible, hasTransparent, isBaked glyph columns
+                if (i === 3 || i === 4 || i === 8 || i === 9) {
+                    column.className = 'glyph';
+                }
+                row.appendChild(column);
+            }
+            row.onclick = onRowClicked;
+            row.ondblclick = onRowDoubleClicked;
+            return row;
+        }
+        
+        function updateRowFunction(elRow, itemData) {
+            var typeCell = elRow.childNodes[0];
+            typeCell.innerText = itemData.type;
+            var nameCell = elRow.childNodes[1];
+            nameCell.innerText = itemData.name;
+            var urlCell = elRow.childNodes[2];
+            urlCell.innerText = itemData.url;
+            var lockedCell = elRow.childNodes[3];
+            lockedCell.innerHTML = itemData.locked;
+            var visibleCell = elRow.childNodes[4];
+            visibleCell.innerHTML = itemData.visible;
+            var verticesCountCell = elRow.childNodes[5];
+            verticesCountCell.innerText = itemData.verticesCount;
+            var texturesCountCell = elRow.childNodes[6];
+            texturesCountCell.innerText = itemData.texturesCount;
+            var texturesSizeCell = elRow.childNodes[7];
+            texturesSizeCell.innerText = itemData.texturesSize;
+            var hasTransparentCell = elRow.childNodes[8];
+            hasTransparentCell.innerHTML = itemData.hasTransparent;
+            var isBakedCell = elRow.childNodes[9];
+            isBakedCell.innerHTML = itemData.isBaked;
+            var drawCallsCell = elRow.childNodes[10];
+            drawCallsCell.innerText = itemData.drawCalls;
+            var hasScriptCell = elRow.childNodes[11];
+            hasScriptCell.innerText = itemData.hasScript;
+            
+            if (itemData.selected) {
+                elRow.className = 'selected';
+            } else {
+                elRow.className = '';
+            }
+            
+            var prevItemId = elRow.getAttribute("id");
+            var newItemId = itemData.id;
+            var validPrevItemId = prevItemId !== null && prevItemId.length > 0;     
+            if (validPrevItemId && prevItemId !== newItemId && entitiesByID[prevItemId].elRow === elRow) {
+                elRow.setAttribute("id", "");
+                entitiesByID[prevItemId].elRow = null;
+            }
+            if (!validPrevItemId || prevItemId !== newItemId) {
+                elRow.setAttribute("id", newItemId);
+                entitiesByID[newItemId].elRow = elRow;
+            }
+        }
+        
+        function clearRowFunction(elRow) {
+            for (var i = 0; i < NUM_COLUMNS; i++) {
+                var cell = elRow.childNodes[i];
+                cell.innerHTML = "";
+            }
+            
+            var id = elRow.getAttribute("id");
+            if (id && entitiesByID[id]) {
+                elRow.setAttribute("id", "");
+                entitiesByID[id].elRow = null;
             }
         }
 
         function resize() {
+            var prevScrollTop = elEntityTableScroll.scrollTop;
+            
             // Take up available window space
             elEntityTableScroll.style.height = window.innerHeight - 207;
             
@@ -464,11 +527,37 @@ function loaded() {
                     ths[4].width = 0.08 * tableWidth;
                 }
             }
+            
+            entityList.resetRows(window.innerHeight - WINDOW_NONVARIABLE_HEIGHT);
+            entityList.refresh();
+            
+            elEntityTableScroll.scrollTop = prevScrollTop;
         };
         
-        var showExtraInfo = false;
+        function toggleFilterInView() {
-        var COLLAPSE_EXTRA_INFO = "E";
+            isFilterInView = !isFilterInView;
-        var EXPAND_EXTRA_INFO = "D";
+            if (isFilterInView) {
+                elInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
+                elNoEntitiesInView.style.display = "inline";
+            } else {
+                elInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE);
+                elNoEntitiesInView.style.display = "none";
+            }
+            EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView }));
+            refreshEntities();
+        }
+        
+        function onFilterChange() {
+            refreshEntityList();
+            resize();
+        }
+        
+        function onRadiusChange() {
+            elRadius.value = Math.max(elRadius.value, 0);
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
+            refreshEntities(true);
+            elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
+        }
 
         function toggleInfo(event) {
             showExtraInfo = !showExtraInfo;
@@ -482,7 +571,6 @@ function loaded() {
             resize();
             event.stopPropagation();
         }
-        elInfoToggle.addEventListener("click", toggleInfo, true);
 
         document.addEventListener("keydown", function (keyDownEvent) {
             if (keyDownEvent.target.nodeName === "INPUT") {
@@ -502,29 +590,6 @@ function loaded() {
             }
         }, false);
         
-        var isFilterInView = false;
-        var FILTER_IN_VIEW_ATTRIBUTE = "pressed";
-        elNoEntitiesInView.style.display = "none";
-        elInView.onclick = function () {
-            isFilterInView = !isFilterInView;
-            if (isFilterInView) {
-                elInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
-                elNoEntitiesInView.style.display = "inline";
-            } else {
-                elInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE);
-                elNoEntitiesInView.style.display = "none";
-            }
-            EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView }));
-            refreshEntities();
-        }
-
-        elRadius.onchange = function () {
-            elRadius.value = Math.max(elRadius.value, 0);
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
-            refreshEntities();
-            elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
-        }
-        
         if (window.EventBridge !== undefined) {
             EventBridge.scriptEventReceived.connect(function(data) {
                 data = JSON.parse(data);
@@ -538,9 +603,10 @@ function loaded() {
                 } else if (data.type === "update" && data.selectedIDs !== undefined) {
                     PROFILE("update", function() {
                         var newEntities = data.entities;
-                        if (newEntities && newEntities.length == 0) {
+                        if (newEntities && newEntities.length === 0) {
                             elNoEntitiesMessage.style.display = "block";
                             elFooter.firstChild.nodeValue = "0 entities found";
+                            clearEntities();
                         } else if (newEntities) {
                             elNoEntitiesMessage.style.display = "none";
                             updateEntityData(newEntities);
@@ -558,12 +624,13 @@ function loaded() {
             });
         }
         
-        setSortColumn('type');
         resize();
-        entityList.initialize(572);
+        setSortColumn('type');
         refreshEntities();
     });
     
+    augmentSpinButtons();
+
     // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
     document.addEventListener("contextmenu", function (event) {
         event.preventDefault();

scripts/system/html/js/listView.js

@@ -24,38 +24,44 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
     var elBottomBuffer = null;
 
     var visibleItemData = [];
+    var elRows = [];
     
     var rowOffset = 0;
-    var numRows = 0;
     var rowHeight = 0;
     var lastRowChangeScrollTop = 0;
     
+    that.getRowOffset = function() {
+        return rowOffset;
+    };
+    
+    that.resetRowOffset = function() {
+        rowOffset = 0;
+        lastRowChangeScrollTop = 0;
+    };
+    
+    that.getNumRows = function() {
+        return elRows.length;
+    };
+    
     that.setVisibleItemData = function(itemData) {
         visibleItemData = itemData;
     };
         
     that.clear = function() {
-        for (var i = 0; i < numRows; i++) {
+        for (var i = 0; i < that.getNumRows(); i++) {
             var elRow = elTableBody.childNodes[i + FIRST_ROW_INDEX];
             clearRowFunction(elRow);
+            elRow.style.display = "none";
         }
     };
     
-    that.setSortKey = function(key) {
-        
-    };
-    
-    that.setFilter = function(filter) {
-        
-    };
-    
     that.scrollDown = function(numScrollRows) {     
         var prevTopHeight = parseInt(elTopBuffer.getAttribute("height"));
         var prevBottomHeight =  parseInt(elBottomBuffer.getAttribute("height"));
         
         for (var i = 0; i < numScrollRows; i++) {
             var rowMovedTopToBottom = elTableBody.childNodes[FIRST_ROW_INDEX];
-            var rowIndex = numRows + rowOffset;
+            var rowIndex = that.getNumRows() + rowOffset;
             elTableBody.removeChild(rowMovedTopToBottom);
             elTableBody.insertBefore(rowMovedTopToBottom, elBottomBuffer);
             updateRowFunction(rowMovedTopToBottom, visibleItemData[rowIndex]);
@@ -75,7 +81,7 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
 
         for (var i = 0; i < numScrollRows; i++) {
             var topRow = elTableBody.childNodes[FIRST_ROW_INDEX];
-            var rowMovedBottomToTop = elTableBody.childNodes[FIRST_ROW_INDEX + numRows - 1];
+            var rowMovedBottomToTop = elTableBody.childNodes[FIRST_ROW_INDEX + that.getNumRows() - 1];
             var rowIndex = rowOffset - 1;
             elTableBody.removeChild(rowMovedBottomToTop);
             elTableBody.insertBefore(rowMovedBottomToTop, topRow);
@@ -95,6 +101,7 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
         var nextRowChangeScrollTop = lastRowChangeScrollTop + (rowHeight * SCROLL_ROWS);
         var scrollHeight = rowHeight * SCROLL_ROWS;
         var totalItems = visibleItemData.length;
+        var numRows = that.getNumRows();
         
         if (scrollTop >= nextRowChangeScrollTop && numRows + rowOffset < totalItems) {
             var numScrolls = Math.ceil((scrollTop - nextRowChangeScrollTop) / scrollHeight);
@@ -103,7 +110,7 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
                 numScrollRows = totalItems - rowOffset - numRows;
             }
             that.scrollDown(numScrollRows);
-        } else if (scrollTop < lastRowChangeScrollTop && rowOffset >= SCROLL_ROWS) {
+        } else if (scrollTop < lastRowChangeScrollTop) {
             var numScrolls = Math.ceil((lastRowChangeScrollTop - scrollTop) / scrollHeight);
             var numScrollRows = numScrolls * SCROLL_ROWS;
             if (rowOffset - numScrollRows < 0) {
@@ -115,10 +122,13 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
     
     that.refresh = function() {
         // block refreshing before rows are initialized
+        var numRows = that.getNumRows();
         if (numRows === 0) {
             return;
         }
         
+        that.clear();
+        
         for (var i = 0; i < numRows; i++) {
             var rowIndex = i + rowOffset;
             if (rowIndex >= visibleItemData.length) {
@@ -128,8 +138,13 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
             var elRow = elTableBody.childNodes[rowElementIndex];
             var itemData = visibleItemData[rowIndex];
             updateRowFunction(elRow, itemData);
+            elRow.style.display = "";
         }
         
+        var topHiddenRows = rowOffset;
+        var topBufferHeight = rowHeight * topHiddenRows;
+        elTopBuffer.setAttribute("height", topBufferHeight);
+        
         var bottomHiddenRows = visibleItemData.length - numRows - rowOffset;
         var bottomBufferHeight = rowHeight * bottomHiddenRows;
         if (bottomHiddenRows < 0) {
@@ -138,42 +153,60 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
         elBottomBuffer.setAttribute("height", bottomBufferHeight);
     };
     
-    that.initialize = function(viewableHeight) {
+    that.resetRows = function(viewableHeight) {
-        if (!elTable || !elTableBody) {
+        if (!elTableBody) {
-            debugPrint("ListView - no valid table/body element");
+            debugPrint("ListView.resetRows - no valid table body element");
             return;
         }
 
-        elTableScroll.onscroll = that.onScroll;
+        elTopBuffer.setAttribute("height", 0);
+        elBottomBuffer.setAttribute("height", 0);
 
         // clear out any existing rows
-        while(elTableBody.rows.length > 0) {
+        for (var i = 0; i < that.getNumRows(); i++) {
-            elTableBody.deleteRow(0);
+            var elRow = elRows[i];
+            elTableBody.removeChild(elRow);
         }
+        elRows = [];
         
-        elTopBuffer = document.createElement("tr");
-        elTopBuffer.setAttribute("height", 0);
-        elTableBody.appendChild(elTopBuffer);
-        
-        elBottomBuffer = document.createElement("tr");
-        elBottomBuffer.setAttribute("height", 0);
-        elTableBody.appendChild(elBottomBuffer);
-        
-        var maxHeight = viewableHeight;
         var usedHeight = 0;
-        while(usedHeight < maxHeight) {
+        while(usedHeight < viewableHeight) {
-            var newRow = createRowFunction(elBottomBuffer);
+            var newRow = createRowFunction();
+            elTableBody.insertBefore(newRow, elBottomBuffer);
             rowHeight = elTableBody.offsetHeight - usedHeight;
             usedHeight = elTableBody.offsetHeight;     
-            numRows++;
+            elRows.push(newRow);
         }
         
         // extra rows for scrolling purposes
         for (var i = 0; i < SCROLL_ROWS; i++) {
-            var scrollRow = createRowFunction(elBottomBuffer);
+            var scrollRow = createRowFunction();
-            numRows++;
+            elTableBody.insertBefore(scrollRow, elBottomBuffer);
+            elRows.push(scrollRow);
         }
+    };
+    
+    that.initialize = function() {
+        if (!elTableBody || !elTableScroll) {
+            debugPrint("ListView.initialize - no valid table body or table scroll element");
+            return;
         }
         
+        // delete initial blank row
+        elTableBody.deleteRow(0);
+        
+        elTopBuffer = document.createElement("tr");
+        elTableBody.appendChild(elTopBuffer);
+        elTopBuffer.setAttribute("height", 0);
+        
+        elBottomBuffer = document.createElement("tr");
+        elTableBody.appendChild(elBottomBuffer);
+        elBottomBuffer.setAttribute("height", 0);
+        
+        elTableScroll.onscroll = that.onScroll;
+    };
+    
+    that.initialize();
+    
     return that;
 }