web: virtual scrolling

1 files changed, 80 insertions, 27 deletions

diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 6b56e512..76ceea41 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -14,11 +14,13 @@ var FlowRow = React.createClass({
             </tr>);
     },
     shouldComponentUpdate: function (nextProps) {
-        var isEqual = (
-        this.props.columns.length === nextProps.columns.length &&
-        this.props.selected === nextProps.selected &&
-        this.props.flow.response === nextProps.flow.response);
-        return !isEqual;
+        return true;
+        // Further optimization could be done here
+        // by calling forceUpdate on flow updates, selection changes and column changes.
+        //return (
+        //(this.props.columns.length !== nextProps.columns.length) ||
+        //(this.props.selected !== nextProps.selected)
+        //);
     }
 });
 
@@ -33,30 +35,51 @@ var FlowTableHead = React.createClass({
     }
 });
 
-var FlowTableBody = React.createClass({
-    render: function () {
-        var rows = this.props.flows.map(function (flow) {
-            var selected = (flow == this.props.selected);
-            return <FlowRow key={flow.id}
-                ref={flow.id}
-                flow={flow}
-                columns={this.props.columns}
-                selected={selected}
-                selectFlow={this.props.selectFlow}
-            />;
-        }.bind(this));
-        return <tbody>{rows}</tbody>;
-    }
-});
 
+var ROW_HEIGHT = 32;
 
 var FlowTable = React.createClass({
     mixins: [StickyHeadMixin, AutoScrollMixin],
     getInitialState: function () {
         return {
-            columns: all_columns
+            columns: all_columns,
+            start: 0,
+            stop: 0
         };
     },
+    componentWillMount: function () {
+        if (this.props.view) {
+            this.props.view.addListener("add update remove recalculate", this.onChange);
+        }
+    },
+    componentWillReceiveProps: function (nextProps) {
+        if (nextProps.view !== this.props.view) {
+            if (this.props.view) {
+                this.props.view.removeListener("add update remove recalculate");
+            }
+            nextProps.view.addListener("add update remove recalculate", this.onChange);
+        }
+    },
+    componentDidMount: function () {
+        this.onScroll();
+    },
+    onScroll: function () {
+        this.adjustHead();
+
+        var viewport = this.getDOMNode();
+        var top = viewport.scrollTop;
+        var height = viewport.offsetHeight;
+        var start = Math.floor(top / ROW_HEIGHT);
+        var stop = start + Math.ceil(height / ROW_HEIGHT);
+        this.setState({
+            start: start,
+            stop: stop
+        });
+    },
+    onChange: function () {
+        console.log("onChange");
+        this.forceUpdate();
+    },
     scrollIntoView: function (flow) {
         // Now comes the fun part: Scroll the flow into the view.
         var viewport = this.getDOMNode();
@@ -77,16 +100,46 @@ var FlowTable = React.createClass({
         }
     },
     render: function () {
+        var space_top = 0, space_bottom = 0, fix_nth_row = null;
+        var rows = [];
+        if (this.props.view) {
+            var flows = this.props.view.flows;
+            var max = Math.min(flows.length, this.state.stop);
+            console.log("render", this.props.view.flows.length, this.state.start, max - this.state.start, flows.length - this.state.stop);
+
+            for (var i = this.state.start; i < max; i++) {
+                var flow = flows[i];
+                var selected = (flow === this.props.selected);
+                rows.push(
+                    <FlowRow key={flow.id}
+                        ref={flow.id}
+                        flow={flow}
+                        columns={this.state.columns}
+                        selected={selected}
+                        selectFlow={this.props.selectFlow}
+                    />
+                );
+            }
+
+            space_top = this.state.start * ROW_HEIGHT;
+            space_bottom = Math.max(0, flows.length - this.state.stop) * ROW_HEIGHT;
+            if(this.state.start % 2 === 1){
+                fix_nth_row = <tr></tr>;
+            }
+        }
+
+
         return (
-            <div className="flow-table" onScroll={this.adjustHead}>
+            <div className="flow-table" onScroll={this.onScroll}>
                 <table>
                     <FlowTableHead ref="head"
                         columns={this.state.columns}/>
-                    <FlowTableBody ref="body"
-                        flows={this.props.flows}
-                        selected={this.props.selected}
-                        selectFlow={this.props.selectFlow}
-                        columns={this.state.columns}/>
+                    <tbody>
+                        <tr style={{height: space_top}}></tr>
+                        { fix_nth_row }
+                        {rows}
+                        <tr style={{height: space_bottom}}></tr>
+                    </tbody>
                 </table>
             </div>
         );