From 38bf34ebd9826c6f69d97906282632fbd5cff06b Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 27 Nov 2014 01:38:30 +0100 Subject: web++ --- web/src/js/components/flowtable.jsx.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index fc4d8fbc..2baf728f 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -1,10 +1,8 @@ -/** @jsx React.DOM */ - var FlowRow = React.createClass({ render: function(){ var flow = this.props.flow; - var columns = this.props.columns.map(function(column){ - return ; + var columns = this.props.columns.map(function(Column){ + return ; }.bind(this)); var className = ""; if(this.props.selected){ -- cgit v1.2.3 From e41c0be293502619b6a072fb9bcd8bbd8694b86a Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 27 Nov 2014 01:40:26 +0100 Subject: format code --- web/src/js/components/flowtable.jsx.js | 56 ++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 27 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 2baf728f..6b56e512 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -1,11 +1,11 @@ var FlowRow = React.createClass({ - render: function(){ + render: function () { var flow = this.props.flow; - var columns = this.props.columns.map(function(Column){ + var columns = this.props.columns.map(function (Column) { return ; }.bind(this)); var className = ""; - if(this.props.selected){ + if (this.props.selected) { className += "selected"; } return ( @@ -13,35 +13,37 @@ var FlowRow = React.createClass({ {columns} ); }, - shouldComponentUpdate: function(nextProps){ + shouldComponentUpdate: function (nextProps) { var isEqual = ( - this.props.columns.length === nextProps.columns.length && - this.props.selected === nextProps.selected && - this.props.flow.response === nextProps.flow.response); + this.props.columns.length === nextProps.columns.length && + this.props.selected === nextProps.selected && + this.props.flow.response === nextProps.flow.response); return !isEqual; } }); var FlowTableHead = React.createClass({ - render: function(){ - var columns = this.props.columns.map(function(column){ + render: function () { + var columns = this.props.columns.map(function (column) { return column.renderTitle(); }.bind(this)); - return {columns}; + return + {columns} + ; } }); var FlowTableBody = React.createClass({ - render: function(){ - var rows = this.props.flows.map(function(flow){ + render: function () { + var rows = this.props.flows.map(function (flow) { var selected = (flow == this.props.selected); return ; + ref={flow.id} + flow={flow} + columns={this.props.columns} + selected={selected} + selectFlow={this.props.selectFlow} + />; }.bind(this)); return {rows}; } @@ -55,7 +57,7 @@ var FlowTable = React.createClass({ columns: all_columns }; }, - scrollIntoView: function(flow){ + scrollIntoView: function (flow) { // Now comes the fun part: Scroll the flow into the view. var viewport = this.getDOMNode(); var flowNode = this.refs.body.refs[flow.id].getDOMNode(); @@ -68,9 +70,9 @@ var FlowTable = React.createClass({ // -thead_height pixel earlier. flowNode_top -= this.refs.body.getDOMNode().offsetTop; - if(flowNode_top < viewport_top){ + if (flowNode_top < viewport_top) { viewport.scrollTop = flowNode_top; - } else if(flowNode_bottom > viewport_bottom) { + } else if (flowNode_bottom > viewport_bottom) { viewport.scrollTop = flowNode_bottom - viewport.offsetHeight; } }, @@ -79,14 +81,14 @@ var FlowTable = React.createClass({
+ columns={this.state.columns}/> + flows={this.props.flows} + selected={this.props.selected} + selectFlow={this.props.selectFlow} + columns={this.state.columns}/>
- ); + ); } }); -- cgit v1.2.3 From 7ca1ac0f3b7856c0ae44bfbf3b27ae4a424a1cc2 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 16:03:56 +0100 Subject: web: virtual scrolling --- web/src/js/components/flowtable.jsx.js | 107 ++++++++++++++++++++++++--------- 1 file changed, 80 insertions(+), 27 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') 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({ ); }, 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 ; - }.bind(this)); - return {rows}; - } -}); +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( + + ); + } + + 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 = ; + } + } + + return ( -
+
- + + + { fix_nth_row } + {rows} + +
); -- cgit v1.2.3 From c39b6e4277357c9da1dfd5e3e8c41b5b3427e0ce Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 19:16:47 +0100 Subject: web: various fixes, add clear button --- web/src/js/components/flowtable.jsx.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 76ceea41..6d0f5ee7 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -83,20 +83,23 @@ var FlowTable = React.createClass({ scrollIntoView: function (flow) { // Now comes the fun part: Scroll the flow into the view. var viewport = this.getDOMNode(); - var flowNode = this.refs.body.refs[flow.id].getDOMNode(); + var thead_height = this.refs.body.getDOMNode().offsetTop; + + var flow_top = (this.props.view.index(flow) * ROW_HEIGHT) + thead_height; + var viewport_top = viewport.scrollTop; var viewport_bottom = viewport_top + viewport.offsetHeight; - var flowNode_top = flowNode.offsetTop; - var flowNode_bottom = flowNode_top + flowNode.offsetHeight; + var flow_bottom = flow_top + ROW_HEIGHT; + + // Account for pinned thead + - // Account for pinned thead by pretending that the flowNode starts - // -thead_height pixel earlier. - flowNode_top -= this.refs.body.getDOMNode().offsetTop; + console.log("scrollInto", flow_top, flow_bottom, viewport_top, viewport_bottom, thead_height); - if (flowNode_top < viewport_top) { - viewport.scrollTop = flowNode_top; - } else if (flowNode_bottom > viewport_bottom) { - viewport.scrollTop = flowNode_bottom - viewport.offsetHeight; + if (flow_top - thead_height < viewport_top) { + viewport.scrollTop = flow_top - thead_height; + } else if (flow_bottom > viewport_bottom) { + viewport.scrollTop = flow_bottom - viewport.offsetHeight; } }, render: function () { @@ -134,7 +137,7 @@ var FlowTable = React.createClass({ - + { fix_nth_row } {rows} -- cgit v1.2.3 From dd1a45140c8a6cb3f6c5d7247120c05fa37cdf24 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 20:03:04 +0100 Subject: web: add virtualscroll mixin --- web/src/js/components/flowtable.jsx.js | 65 +++++++++------------------------- 1 file changed, 17 insertions(+), 48 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 6d0f5ee7..f608f41d 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -39,12 +39,10 @@ var FlowTableHead = React.createClass({ var ROW_HEIGHT = 32; var FlowTable = React.createClass({ - mixins: [StickyHeadMixin, AutoScrollMixin], + mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin], getInitialState: function () { return { - columns: all_columns, - start: 0, - stop: 0 + columns: all_columns }; }, componentWillMount: function () { @@ -61,46 +59,26 @@ var FlowTable = React.createClass({ } }, componentDidMount: function () { - this.onScroll(); + this.onScroll2(); }, - onScroll: function () { + getDefaultProps: function () { + return { + rowHeight: ROW_HEIGHT + }; + }, + onScroll2: 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 - }); + this.onScroll(); }, 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(); - var thead_height = this.refs.body.getDOMNode().offsetTop; - - var flow_top = (this.props.view.index(flow) * ROW_HEIGHT) + thead_height; - - var viewport_top = viewport.scrollTop; - var viewport_bottom = viewport_top + viewport.offsetHeight; - var flow_bottom = flow_top + ROW_HEIGHT; - - // Account for pinned thead - - - console.log("scrollInto", flow_top, flow_bottom, viewport_top, viewport_bottom, thead_height); - - if (flow_top - thead_height < viewport_top) { - viewport.scrollTop = flow_top - thead_height; - } else if (flow_bottom > viewport_bottom) { - viewport.scrollTop = flow_bottom - viewport.offsetHeight; - } + this.scrollRowIntoView( + this.props.view.index(flow), + this.refs.body.getDOMNode().offsetTop + ); }, render: function () { var space_top = 0, space_bottom = 0, fix_nth_row = null; @@ -108,7 +86,6 @@ var FlowTable = React.createClass({ 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]; @@ -123,25 +100,17 @@ var FlowTable = React.createClass({ /> ); } - - 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 = ; - } } - return ( -
+
- - { fix_nth_row } + { this.getPlaceholderTop() } {rows} - + { this.getPlaceholderBottom(flows.length) }
-- cgit v1.2.3 From f6c0e000da504a68ecd41a8f7ce59e2f71e0a218 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 20:54:52 +0100 Subject: event log: virtual scrolling --- web/src/js/components/flowtable.jsx.js | 34 ++++++++++++---------------------- 1 file changed, 12 insertions(+), 22 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index f608f41d..9eeddbaa 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -58,9 +58,6 @@ var FlowTable = React.createClass({ nextProps.view.addListener("add update remove recalculate", this.onChange); } }, - componentDidMount: function () { - this.onScroll2(); - }, getDefaultProps: function () { return { rowHeight: ROW_HEIGHT @@ -80,27 +77,20 @@ var FlowTable = React.createClass({ this.refs.body.getDOMNode().offsetTop ); }, + renderRow: function (flow) { + var selected = (flow === this.props.selected); + return ; + }, 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); + var flows = this.props.view ? this.props.view.flows : []; - for (var i = this.state.start; i < max; i++) { - var flow = flows[i]; - var selected = (flow === this.props.selected); - rows.push( - - ); - } - } + var rows = this.renderRows(flows); return (
-- cgit v1.2.3 From 096a3af273ccb309820351b466e62382f62a2c36 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sat, 29 Nov 2014 03:25:07 +0100 Subject: web: various improvements --- web/src/js/components/flowtable.jsx.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 9eeddbaa..1a4efe89 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -63,12 +63,11 @@ var FlowTable = React.createClass({ rowHeight: ROW_HEIGHT }; }, - onScroll2: function () { + onScrollFlowTable: function () { this.adjustHead(); this.onScroll(); }, onChange: function () { - console.log("onChange"); this.forceUpdate(); }, scrollIntoView: function (flow) { @@ -88,12 +87,13 @@ 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 rows = this.renderRows(flows); return ( -
+
-- cgit v1.2.3 From e12bf19e35867f3ea69f45054decb024a75fc2b4 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 10 Dec 2014 00:47:05 +0100 Subject: web: add event store, fix all those bugs --- web/src/js/components/flowtable.jsx.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web/src/js/components/flowtable.jsx.js') 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({ - { this.getPlaceholderTop() } + { this.getPlaceholderTop(flows.length) } {rows} { this.getPlaceholderBottom(flows.length) } -- cgit v1.2.3