triple list structure, added columns, sorting

scripts/system/html/entityListNew.html

@@ -42,17 +42,48 @@
                     <colgroup>
                         <col span="1" id="col-type" />
                         <col span="1" id="col-name" />
+                        <col span="1" id="col-url" />
+                        <col span="1" id="col-locked" />
+                        <col span="1" id="col-visible" />
+                        <col span="1" id="col-verticesCount" />
+                        <col span="1" id="col-texturesCount" />
+                        <col span="1" id="col-texturesSize" />
+                        <col span="1" id="col-hasTransparent" />
+                        <col span="1" id="col-isBaked" />
+                        <col span="1" id="col-drawCalls" />
+                        <col span="1" id="col-hasScript" />
                     </colgroup>
                     <thead id="entity-table-header">
                         <tr>
                             <th id="entity-type">Type<span class="sort-order"></span><span id="info-toggle"><span class="glyph">D</span></span></th>
                             <th id="entity-name">Name<span class="sort-order"></span></th>
+                            <th id="entity-url">File<span class="sort-order"></span></th>
+                            <th id="entity-locked"><span class="glyph">&#xe006;</span><span class="sort-order"></span></th>
+                            <th id="entity-visible"><span class="glyph">&#xe007;</span><span class="sort-order"></span></th>
+                            <th id="entity-verticesCount">Verts<span class="sort-order"></span></th>
+                            <th id="entity-texturesCount">Texts<span class="sort-order"></span></th>
+                            <th id="entity-texturesSize">Text MB<span class="sort-order"></span></th>
+                            <th id="entity-hasTransparent"><span class="glyph">&#xe00b;</span><span class="sort-order"></span></th>
+                            <th id="entity-isBaked">Baked<span class="sort-order"></span></th>
+                            <th id="entity-drawCalls">Draws<span class="sort-order"></span></th>
+                            <th colspan="1" id="entity-hasScript"><span class="glyph">k</span><span class="sort-order"></span></th>
                         </tr>
                     </thead>
                     <tbody class="list" id="entity-table-body">
                         <tr>
                             <td class="type"></td>
                             <td class="name"></td>
+                            <td class="url"><div class='outer'><div class='inner'></div></div></td>
+                            <td class="locked glyph"></td>
+                            <td class="visible glyph"></td>
+                            <td class="verticesCount"></td>
+                            <td class="texturesCount"></td>
+                            <td class="texturesSize"></td>
+                            <td class="hasTransparent glyph"></td>
+                            <td class="isBaked glyph"></td>
+                            <td class="drawCalls"></td>
+                            <td class="hasScript glyph"></td>
+                            <td class="id" style="display: none"></td>
                         </tr>
                     </tbody>
                     <tfoot id="entity-table-footer">

scripts/system/html/js/entityListNew.js

@@ -6,12 +6,56 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 
-var entities = {};
+const ASCENDING_SORT = 1;
+const DESCENDING_SORT = -1;
+const ASCENDING_STRING = '▴';
+const DESCENDING_STRING = '▾';
+const COMPARE_ASCENDING = function(a, b) {
+    let va = a[currentSortColumn];
+    let vb = b[currentSortColumn];
+
+    if (va < vb) {
+        return -1;
+    }  else if (va > vb) {
+        return 1;
+    }
+    return 0;
+}
+const COMPARE_DESCENDING = function(a, b) {
+    return COMPARE_ASCENDING(b, a);
+}
+const LOCKED_GLYPH = "&#xe006;";
+const VISIBLE_GLYPH = "&#xe007;";
+const TRANSPARENCY_GLYPH = "&#xe00b;";
+const BAKED_GLYPH = "&#xe01a;"
+const SCRIPT_GLYPH = "k";
+const BYTES_PER_MEGABYTE = 1024 * 1024;
+const IMAGE_MODEL_NAME = 'default-image-model.fbx';
+const NUM_COLUMNS = 12;
+
+var entities = [];
+var entitiesByID = {};
+var visibleEntities = [];
+
 var selectedEntities = [];
+
 var currentSortColumn = 'type';
 var currentSortOrder = 'des';
+
 var entityList = null;
-var refreshEntityListTimer = null;
+
+const ENABLE_PROFILING = true;
+var profileIndent = '';
+const PROFILE = !ENABLE_PROFILING ? function() { } : function(name, fn, args) {
+    console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
+    var previousIndent = profileIndent;
+    profileIndent += '  ';
+    var before = Date.now();
+    fn.apply(this, args);
+    var delta = Date.now() - before;
+    profileIndent = previousIndent;
+    console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
+};
 
 debugPrint = function (message) {
     console.log(message);
@@ -34,7 +78,7 @@ function loaded() {
         elExport = document.getElementById("export");
         elPal = document.getElementById("pal");
         elInfoToggle = document.getElementById("info-toggle");
-        //elInfoToggleGlyph = elInfoToggle.firstChild;
+        elInfoToggleGlyph = elInfoToggle.firstChild;
         elFooter = document.getElementById("footer-text");
         elNoEntitiesMessage = document.getElementById("no-entities");
         elNoEntitiesInView = document.getElementById("no-entities-in-view");
@@ -42,16 +86,72 @@ function loaded() {
 
         entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRowFunction, updateRowFunction, clearRowFunction);
         
+        document.getElementById("entity-name").onclick = function() {
+            setSortColumn('name');
+        };
+        document.getElementById("entity-type").onclick = function() {
+            setSortColumn('type');
+        };
+        document.getElementById("entity-url").onclick = function() {
+            setSortColumn('url');
+        };
+        document.getElementById("entity-locked").onclick = function () {
+            setSortColumn('locked');
+        };
+        document.getElementById("entity-visible").onclick = function () {
+            setSortColumn('visible');
+        };
+        document.getElementById("entity-verticesCount").onclick = function () {
+            setSortColumn('verticesCount');
+        };
+        document.getElementById("entity-texturesCount").onclick = function () {
+            setSortColumn('texturesCount');
+        };
+        document.getElementById("entity-texturesSize").onclick = function () {
+            setSortColumn('texturesSize');
+        };
+        document.getElementById("entity-hasTransparent").onclick = function () {
+            setSortColumn('hasTransparent');
+        };
+        document.getElementById("entity-isBaked").onclick = function () {
+            setSortColumn('isBaked');
+        };
+        document.getElementById("entity-drawCalls").onclick = function () {
+            setSortColumn('drawCalls');
+        };
+        document.getElementById("entity-hasScript").onclick = function () {
+            setSortColumn('hasScript');
+        };
+        
+        elRefresh.onclick = function() {
+            refreshEntities();
+        }
+        elToggleLocked.onclick = function() {
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
+        }
+        elToggleVisible.onclick = function() {
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
+        }
+        elExport.onclick = function() {
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
+        }
+        elPal.onclick = function() {
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'pal' }));
+        }
+        elDelete.onclick = function() {
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
+        }
+
         function createRowFunction(elBottomBuffer) {
             var row = document.createElement("tr");
-            var typeCell = document.createElement("td");
+            for (var i = 0; i < NUM_COLUMNS; i++) {
-            var typeCellText = document.createTextNode("");
+                var column = document.createElement("td");
-            var nameCell = document.createElement("td");
+                // locked, visible, hasTransparent, isBaked glyph columns
-            var nameCellText = document.createTextNode("");
+                if (i === 3 || i === 4 || i === 8 || i === 9) {
-            typeCell.appendChild(typeCellText);
+                    column.className = 'glyph';
-            nameCell.appendChild(nameCellText);
+                }
-            row.appendChild(typeCell);
+                row.appendChild(column);
-            row.appendChild(nameCell);
+            }
             row.onclick = onRowClicked;
             row.ondblclick = onRowDoubleClicked;
             elEntityTableBody.insertBefore(row, elBottomBuffer);
@@ -60,33 +160,59 @@ function loaded() {
         
         function updateRowFunction(elRow, itemData) {
             var typeCell = elRow.childNodes[0];
+            typeCell.innerText = itemData.type;
             var nameCell = elRow.childNodes[1];
-            typeCell.innerHTML = itemData.type;
+            nameCell.innerText = itemData.name;
-            nameCell.innerHTML = 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 id = elRow.getAttribute("id");
+            var prevItemId = elRow.getAttribute("id");
-            entities[id].el = elRow;
+            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) {
-            var typeCell = elRow.childNodes[0];
+            for (var i = 0; i < NUM_COLUMNS; i++) {
-            var nameCell = elRow.childNodes[1];
+                var cell = elRow.childNodes[i];
-            typeCell.innerHTML = "";
+                cell.innerHTML = "";
-            nameCell.innerHTML = "";
+            }
 
             var id = elRow.getAttribute("id");
-            if (id && entities[id]) {
+            if (id && entitiesByID[id]) {
-                entities[id].el = null;
+                entitiesByID[id].elRow = null;
             }
         }
 
         function onRowClicked(clickEvent) {
-            var id = this.getAttribute("id");
+            var entityID = this.getAttribute("id");
-            var selection = [id];
+            var selection = [entityID];
 
-            /*
             if (clickEvent.ctrlKey) {
-                var selectedIndex = selectedEntities.indexOf(id);
+                var selectedIndex = selectedEntities.indexOf(entityID);
                 if (selectedIndex >= 0) {
                     selection = selectedEntities;
                     selection.splice(selectedIndex, 1)
@@ -96,11 +222,12 @@ function loaded() {
             } else if (clickEvent.shiftKey && selectedEntities.length > 0) {
                 var previousItemFound = -1;
                 var clickedItemFound = -1;
-                for (var entity in entityList.visibleItems) {
+                for (var i = 0; i < visibleEntities.length; i++) {
-                    if (clickedItemFound === -1 && this.dataset.entityId == entityList.visibleItems[entity].values().id) {
+                    var entity = visibleEntities[i];
-                        clickedItemFound = entity;
+                    if (clickedItemFound === -1 && entityID == entity.id) {
-                    } else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) {
+                        clickedItemFound = i;
-                        previousItemFound = entity;
+                    } else if(previousItemFound === -1 && selectedEntities[0] == entity.id) {
+                        previousItemFound = i;
                     }
                 }
                 if (previousItemFound !== -1 && clickedItemFound !== -1) {
@@ -108,8 +235,8 @@ function loaded() {
                     var 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++) {
-                        entityList.visibleItems[i].elm.className = 'selected';
+                        visibleEntities[i].elRow.className = 'selected';
-                        betweenItems.push(entityList.visibleItems[i].values().id);
+                        betweenItems.push(visibleEntities[i].id);
                     }
                     if (previousItemFound > clickedItemFound) {
                         // always make sure that we add the items in the right order
@@ -118,7 +245,6 @@ function loaded() {
                     selection = selection.concat(betweenItems, selectedEntities);
                 }
             }
-            */
 
             selectedEntities = selection;
 
@@ -134,73 +260,45 @@ function loaded() {
         }
 
         function onRowDoubleClicked() {
-            var id = this.getAttribute("id");
+            var entityID = this.getAttribute("id");
             EventBridge.emitWebEvent(JSON.stringify({
                 type: "selectionUpdate",
                 focus: true,
-                entityIds: [id],
+                entityIds: [entityID],
             }));
         }
 
-        function addEntity(id, name, type) {            
-            //var urlParts = url.split('/');
-            //var filename = urlParts[urlParts.length - 1];
-
-            var IMAGE_MODEL_NAME = 'default-image-model.fbx';
-
-            //if (filename === IMAGE_MODEL_NAME) {
-            //    type = "Image";
-            //}
-
-            if (entities[id] === undefined) {
-                var entityData = {name: name, type: type};
-                entityList.addItem(id, entityData);
-                entityData.el = null;
-                entities[id] = entityData;
-            }
-        }
-
-        function removeEntities(deletedIDs) {
-            for (var i = 0, length = deletedIDs.length; i < length; i++) {
-                var deleteID = deletedIDs[i];
-                delete entities[deleteID];
-                entityList.removeItem(deleteID);
-            }
-        }
-
-        function scheduleRefreshEntityList() {
-            var REFRESH_DELAY = 50;
-            if (refreshEntityListTimer) {
-                clearTimeout(refreshEntityListTimer);
-            }
-            refreshEntityListTimer = setTimeout(refreshEntityListObject, REFRESH_DELAY);
-        }
-
-        function clearEntities() {
-            entities = {};
-            entityList.clear();
-            refreshFooter();
-        }
-
         var elSortOrder = {
             name: document.querySelector('#entity-name .sort-order'),
             type: document.querySelector('#entity-type .sort-order'),
+            url: document.querySelector('#entity-url .sort-order'),
+            locked: document.querySelector('#entity-locked .sort-order'),
+            visible: document.querySelector('#entity-visible .sort-order'),
+            verticesCount: document.querySelector('#entity-verticesCount .sort-order'),
+            texturesCount: document.querySelector('#entity-texturesCount .sort-order'),
+            texturesSize: document.querySelector('#entity-texturesSize .sort-order'),
+            hasTransparent: document.querySelector('#entity-hasTransparent .sort-order'),
+            isBaked: document.querySelector('#entity-isBaked .sort-order'),
+            drawCalls: document.querySelector('#entity-drawCalls .sort-order'),
+            hasScript: document.querySelector('#entity-hasScript .sort-order'),
         }
         function setSortColumn(column) {
-            if (currentSortColumn == column) {
+            PROFILE("set-sort-column", function() {
-                currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
+                if (currentSortColumn === column) {
+                    currentSortOrder *= -1;
                 } else {
                     elSortOrder[currentSortColumn].innerHTML = "";
                     currentSortColumn = column;
-                currentSortOrder = "asc";
+                    currentSortOrder = ASCENDING_SORT;
                 }
-            elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
+                elSortOrder[column].innerHTML = currentSortOrder == ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
-            //entityList.sort(currentSortColumn, { order: currentSortOrder });
+                refreshEntityList();
+            });
         }
         
-        function refreshEntities() {
+        function clearEntities() {
-            clearEntities();
+            entities = {};
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
+            refreshFooter();
         }
 
         function refreshFooter() {
@@ -208,26 +306,102 @@ function loaded() {
                 elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
             } else if (selectedEntities.length === 1) {
                 elFooter.firstChild.nodeValue = "1 entity selected";
-            } /* else if (entityList.visibleItems.length === 1) {
+            } else if (visibleEntities.length === 1) {
                 elFooter.firstChild.nodeValue = "1 entity found";
             } else {
-                elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
+                elFooter.firstChild.nodeValue = visibleEntities.length + " entities found";
-            } */
+            }
         }
         
-        function refreshEntityListObject() {
+        function refreshEntities() {
-            refreshEntityListTimer = null;
+            clearEntities();
-            //entityList.sort(currentSortColumn, { order: currentSortOrder });
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
-            //entityList.search(elFilter.value);
+        }
+
+        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;
-            for (var id in entities) {
+            for (var id in entitiesByID) {
-                if (entities[id].el) {
+                if (entitiesByID[id].elRow) {
-                    entities[id].el.className = '';
+                    entitiesByID[id].elRow.className = '';
                 }
             }
 
@@ -236,8 +410,8 @@ function loaded() {
                 var id = selectedIDs[i];
                 selectedEntities.push(id);
                 if (id in entities) {
-                    var entity = entities[id];
+                    var entity = entitiesByID[id];
-                    entity.el.className = 'selected';
+                    entity.elRow.className = 'selected';
                 } else {
                     notFound = true;
                 }
@@ -248,6 +422,13 @@ function loaded() {
             return notFound;
         }
         
+        function removeEntities(deletedIDs) {
+            for (var i = 0, length = deletedIDs.length; i < length; i++) {
+                var deleteID = deletedIDs[i];
+                delete entitiesByID[deleteID];
+            }
+        }
+
         function resize() {
             // Take up available window space
             elEntityTableScroll.style.height = window.innerHeight - 207;
@@ -278,9 +459,9 @@ function loaded() {
                 } else {
                     ths[0].width = 0.16 * tableWidth;
                     ths[1].width = 0.34 * tableWidth;
-                    //ths[2].width = 0.34 * tableWidth;
+                    ths[2].width = 0.34 * tableWidth;
-                    //ths[3].width = 0.08 * tableWidth;
+                    ths[3].width = 0.08 * tableWidth;
-                    //ths[4].width = 0.08 * tableWidth;
+                    ths[4].width = 0.08 * tableWidth;
                 }
             }
         };
@@ -303,25 +484,6 @@ function loaded() {
         }
         elInfoToggle.addEventListener("click", toggleInfo, true);
 
-        elRefresh.onclick = function() {
-            refreshEntities();
-        }
-        elToggleLocked.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
-        }
-        elToggleVisible.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
-        }
-        elExport.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
-        }
-        elPal.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'pal' }));
-        }
-        elDelete.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
-        }
-
         document.addEventListener("keydown", function (keyDownEvent) {
             if (keyDownEvent.target.nodeName === "INPUT") {
                 return;
@@ -374,24 +536,21 @@ function loaded() {
                         refreshEntities();
                     }
                 } else if (data.type === "update" && data.selectedIDs !== undefined) {
+                    PROFILE("update", function() {
                         var newEntities = data.entities;
                         if (newEntities && newEntities.length == 0) {
                             elNoEntitiesMessage.style.display = "block";
                             elFooter.firstChild.nodeValue = "0 entities found";
                         } else if (newEntities) {
                             elNoEntitiesMessage.style.display = "none";
-                        for (var i = 0; i < newEntities.length; i++) {
+                            updateEntityData(newEntities);
-                            addEntity(newEntities[i].id, newEntities[i].name, newEntities[i].type);
+                            refreshEntityList();
-                        }
                             updateSelectedEntities(data.selectedIDs);
-                        entityList.refresh();
-                        //scheduleRefreshEntityList();
-                        resize();
                         }
+                    });
                 } else if (data.type === "removeEntities" && data.deletedIDs !== undefined && data.selectedIDs !== undefined) {
                     removeEntities(data.deletedIDs);
                     updateSelectedEntities(data.selectedIDs);
-                    //scheduleRefreshEntityList();
                 } else if (data.type === "deleted" && data.ids) {
                     removeEntities(data.ids);
                     refreshFooter();
@@ -399,6 +558,7 @@ function loaded() {
             });
         }
         
+        setSortColumn('type');
         resize();
         entityList.initialize(572);
         refreshEntities();

scripts/system/html/js/listView.js

@@ -23,29 +23,15 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
     var elTopBuffer = null;
     var elBottomBuffer = null;
 
-    var itemData = {};
+    var visibleItemData = [];
     
     var rowOffset = 0;
     var numRows = 0;
     var rowHeight = 0;
     var lastRowChangeScrollTop = 0;
     
-    that.addItem = function(id, data) {
+    that.setVisibleItemData = function(itemData) {
-        if (itemData[id] === undefined) {
+        visibleItemData = itemData;
-            itemData[id] = data;
-        }
-    };
-    
-    that.updateItem = function(id, data) {
-        if (itemData[id] !== undefined) {
-
-        }
-    };
-    
-    that.removeItem = function(id) {
-        if (itemData[id] !== undefined) {
-            delete itemData[id];
-        }
     };
     
     that.clear = function() {
@@ -68,18 +54,11 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
         var prevBottomHeight =  parseInt(elBottomBuffer.getAttribute("height"));
         
         for (var i = 0; i < numScrollRows; i++) {
-            var topRow = elTableBody.childNodes[FIRST_ROW_INDEX];
+            var rowMovedTopToBottom = elTableBody.childNodes[FIRST_ROW_INDEX];
-            elTableBody.removeChild(topRow);
+            var rowIndex = numRows + rowOffset;
-            elTableBody.insertBefore(topRow, elBottomBuffer);
+            elTableBody.removeChild(rowMovedTopToBottom);
-            var rowIndex = 0;
+            elTableBody.insertBefore(rowMovedTopToBottom, elBottomBuffer);
-            for (var id in itemData) {
+            updateRowFunction(rowMovedTopToBottom, visibleItemData[rowIndex]);
-                if (rowIndex === numRows + rowOffset) {
-                    topRow.setAttribute("id", id);
-                    updateRowFunction(topRow, itemData[id]);
-                    break;
-                }
-                rowIndex++;
-            }
             rowOffset++;
         }
         
@@ -96,18 +75,11 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
 
         for (var i = 0; i < numScrollRows; i++) {
             var topRow = elTableBody.childNodes[FIRST_ROW_INDEX];
-            var bottomRow = elTableBody.childNodes[FIRST_ROW_INDEX + numRows - 1];
+            var rowMovedBottomToTop = elTableBody.childNodes[FIRST_ROW_INDEX + numRows - 1];
-            elTableBody.removeChild(bottomRow);
+            var rowIndex = rowOffset - 1;
-            elTableBody.insertBefore(bottomRow, topRow);
+            elTableBody.removeChild(rowMovedBottomToTop);
-            var rowIndex = 0;
+            elTableBody.insertBefore(rowMovedBottomToTop, topRow);
-            for (var id in itemData) {
+            updateRowFunction(rowMovedBottomToTop, visibleItemData[rowIndex]);
-                if (rowIndex === rowOffset - 1) {
-                    bottomRow.setAttribute("id", id);
-                    updateRowFunction(bottomRow, itemData[id]);
-                    break;
-                }
-                rowIndex++;
-            }
             rowOffset--;
         }
         
@@ -121,14 +93,14 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
     that.onScroll = function()  {
         var scrollTop = elTableScroll.scrollTop;
         var nextRowChangeScrollTop = lastRowChangeScrollTop + (rowHeight * SCROLL_ROWS);
-        var totalItems = Object.keys(itemData).length;
         var scrollHeight = rowHeight * SCROLL_ROWS;
+        var totalItems = visibleItemData.length;
         
         if (scrollTop >= nextRowChangeScrollTop && numRows + rowOffset < totalItems) {
             var numScrolls = Math.ceil((scrollTop - nextRowChangeScrollTop) / scrollHeight);
             var numScrollRows = numScrolls * SCROLL_ROWS;
-            if (numScrollRows + rowOffset > totalItems) {
+            if (numScrollRows + rowOffset + numRows > totalItems) {
-                numScrollRows = totalItems - rowOffset;
+                numScrollRows = totalItems - rowOffset - numRows;
             }
             that.scrollDown(numScrollRows);
         } else if (scrollTop < lastRowChangeScrollTop && rowOffset >= SCROLL_ROWS) {
@@ -142,25 +114,23 @@ ListView = function(tableId, tableBodyId, tableScrollId, createRowFunction, upda
     };
     
     that.refresh = function() {
-        var rowIndex = 0;
+        // block refreshing before rows are initialized
-        for (var id in itemData) {
+        if (numRows === 0) {
-            if (rowIndex >= rowOffset) {
+            return;
-                var rowElementIndex = rowIndex + FIRST_ROW_INDEX;
-                var elRow = elTableBody.childNodes[rowElementIndex];
-                var data = itemData[id];
-                elRow.setAttribute("id", id);
-                updateRowFunction(elRow, data); 
         }
         
-            rowIndex++;
+        for (var i = 0; i < numRows; i++) {
-            
+            var rowIndex = i + rowOffset;
-            if (rowIndex - rowOffset === numRows) {
+            if (rowIndex >= visibleItemData.length) {
                 break;
             }
+            var rowElementIndex = i + FIRST_ROW_INDEX;
+            var elRow = elTableBody.childNodes[rowElementIndex];
+            var itemData = visibleItemData[rowIndex];
+            updateRowFunction(elRow, itemData);          
         }
         
-        var totalItems = Object.keys(itemData).length;
+        var bottomHiddenRows = visibleItemData.length - numRows - rowOffset;
-        var bottomHiddenRows = totalItems - numRows - rowOffset;
         var bottomBufferHeight = rowHeight * bottomHiddenRows;
         if (bottomHiddenRows < 0) {
             bottomBufferHeight = 0;