diff --git a/src/InteractionTrace/InteractionTrace.js b/src/InteractionTrace/InteractionTrace.js index 6feccb99496e34bf0324de381f05f42a44171a10..65b3eb2138c4fc9490c530ae83159c4028ab0706 100644 --- a/src/InteractionTrace/InteractionTrace.js +++ b/src/InteractionTrace/InteractionTrace.js @@ -87,6 +87,21 @@ class InteractionTrace extends Component { } } + /** + * Ensure that there is at least minXWidth between each interaction (on x axis). If we have too much data, filter it + * and keep only the latest data that can be displayed. + * @param {any} data The data for the trace + * @return {xDomain, domainFilter} the first is an array of the first and last index in data to be displayed; + * the second is a function that will return true iff the datum we give it belongs to the domain. + */ + filter(data) { + const maxNumberOfInteractions = Math.floor(this.xLayout.width(2) / this.minXWidth()) || 0; + const highestId = d3.max(data, (datum => datum.id)) || 0; + const xDomain = [highestId-maxNumberOfInteractions, highestId]; + const domainFilter = (datum) => (datum.id >= xDomain[0] && datum.id <= xDomain[1]); + return {xDomain: xDomain, domainFilter: domainFilter} + } + render() { let data = this.props.data; @@ -100,13 +115,7 @@ class InteractionTrace extends Component { this.yLayout.updateCellValue(4, this.em * (this.nbPrimitiveActions + 1)); } - // Ensure that there is at least minXWidth around each interaction (on x axis). If we have too much data, - // filter it and keep only the latest data that can be displayed. - const maxNumberOfInteractions = Math.floor(this.xLayout.width(2) / this.minXWidth()) || 0; - const highestId = d3.max(data, (datum => datum.id)) || 0; - const xDomain = [highestId-maxNumberOfInteractions, highestId]; - const domainFilter = (datum) => (datum.id >= xDomain[0] && datum.id <= xDomain[1]); - + const {xDomain, domainFilter} = this.filter(data); data = data.filter(domainFilter); // Scales for all the figure elements, including the plots