5 files changed, 30 insertions, 27 deletions
diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 708432d0..3bd188ea 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -25,32 +25,33 @@ var LogMessage = React.createClass({
 
 var EventLogContents = React.createClass({
     mixins: [AutoScrollMixin, VirtualScrollMixin],
-    getInitialState: function () {
+    getInitialState: function(){
+        var store = new EventLogStore();
+        var view = new StoreView(store, function(entry){
+            return this.props.filter[entry.level];
+        }.bind(this));
+        view.addListener("add recalculate", this.onEventLogChange);
         return {
+            store: store,
+            view: view,
             log: []
         };
     },
-    componentDidMount: function () {
-        this.log = EventLogStore.getView();
-        this.log.addListener("change", this.onEventLogChange);
-    },
     componentWillUnmount: function () {
-        this.log.removeListener("change", this.onEventLogChange);
-        this.log.close();
+        this.state.view.removeListener("add recalculate", this.onEventLogChange);
+        this.state.view.close();
+        this.state.store.close();
     },
     onEventLogChange: function () {
-        var log = this.log.getAll().filter(function (entry) {
-            return this.props.filter[entry.level];
-        }.bind(this));
         this.setState({
-            log: log
+            log: this.state.view.list
         });
     },
-    componentWillReceiveProps: function () {
-        if (this.log) {
-            this.onEventLogChange();
+    componentWillReceiveProps: function (nextProps) {
+        if(nextProps.filter !== this.props.filter){
+            this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.
+            this.state.view.recalculate(this.state.store._list);
         }
-
     },
     getDefaultProps: function () {
         return {
@@ -66,7 +67,7 @@ var EventLogContents = React.createClass({
         var rows = this.renderRows(this.state.log);
 
         return <pre onScroll={this.onScroll}>
-            { this.getPlaceholderTop() }
+            { this.getPlaceholderTop(this.state.log.length) }
             {rows}
             { this.getPlaceholderBottom(this.state.log.length) }
         </pre>;
@@ -112,7 +113,7 @@ var EventLog = React.createClass({
         });
     },
     toggleLevel: function (level) {
-        var filter = this.state.filter;
+        var filter = _.extend({}, this.state.filter);
         filter[level] = !filter[level];
         this.setState({filter: filter});
     },
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 1a4efe89..4b72dd29 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -88,7 +88,7 @@ var FlowTable = React.createClass({
     },
     render: function () {
         //console.log("render flowtable", this.state.start, this.state.stop, this.props.selected);
-        var flows = this.props.view ? this.props.view.flows : [];
+        var flows = this.props.view ? this.props.view.list : [];
 
         var rows = this.renderRows(flows);
 
@@ -98,7 +98,7 @@ var FlowTable = React.createClass({
                     <FlowTableHead ref="head"
                         columns={this.state.columns}/>
                     <tbody ref="body">
-                        { this.getPlaceholderTop() }
+                        { this.getPlaceholderTop(flows.length) }
                         {rows}
                         { this.getPlaceholderBottom(flows.length) }
                     </tbody>
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index c7c9ee9b..570962e0 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -12,7 +12,7 @@ var MainView = React.createClass({
         }
     },
     openView: function (store) {
-        var view = new FlowView(store);
+        var view = new StoreView(store);
         this.setState({
             view: view
         });
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index 3545cfe0..e03b1a57 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -10,7 +10,7 @@ var ProxyAppMain = React.createClass({
     getInitialState: function () {
         return {
             settings: SettingsStore.getAll(),
-            flowStore: new LiveFlowStore()
+            flowStore: new FlowStore()
         };
     },
     componentDidMount: function () {
diff --git a/web/src/js/components/virtualscroll.jsx.js b/web/src/js/components/virtualscroll.jsx.js
index 5a67bbf5..b1924949 100644
--- a/web/src/js/components/virtualscroll.jsx.js
+++ b/web/src/js/components/virtualscroll.jsx.js
@@ -5,15 +5,17 @@ var VirtualScrollMixin = {
             stop: 0
         };
     },
-    componentWillMount: function(){
-        if(!this.props.rowHeight){
+    componentWillMount: function () {
+        if (!this.props.rowHeight) {
             console.warn("VirtualScrollMixin: No rowHeight specified", this);
         }
     },
-    getPlaceholderTop: function () {
+    getPlaceholderTop: function (total) {
         var Tag = this.props.placeholderTagName || "tr";
+        // When a large trunk of elements is removed from the button, start may be far off the viewport.
+        // To make this issue less severe, limit the top placeholder to the total number of rows.
         var style = {
-            height: this.state.start * this.props.rowHeight
+            height: Math.min(this.state.start, total) * this.props.rowHeight
         };
         var spacer = <Tag key="placeholder-top" style={style}></Tag>;
 
@@ -46,7 +48,7 @@ var VirtualScrollMixin = {
             stop: stop
         });
     },
-    renderRows: function(elems){
+    renderRows: function (elems) {
         var rows = [];
         var max = Math.min(elems.length, this.state.stop);
 
@@ -56,7 +58,7 @@ var VirtualScrollMixin = {
         }
         return rows;
     },
-    scrollRowIntoView: function(index, head_height){
+    scrollRowIntoView: function (index, head_height) {
 
         var row_top = (index * this.props.rowHeight) + head_height;
         var row_bottom = row_top + this.props.rowHeight;