diff --git a/src/components/CanGraph.js b/src/components/CanGraph.js index a23435d..9c950fb 100644 --- a/src/components/CanGraph.js +++ b/src/components/CanGraph.js @@ -37,19 +37,19 @@ export default class CanGraph extends Component { if(this.view) { // only update if segment is new let segmentChanged = false; - // if(this.segmentIsNew(nextProps.segment)) { - // if(nextProps.segment.length > 0) { - // // Set segmented domain - // this.view.signal('segment', nextProps.segment) - // } else { - // // Reset segment to full domain - // const xVals = this.props.data.map((d) => d.xRel); - // const min = Math.min.apply(null, xVals); - // const max = Math.max.apply(null, xVals); - // this.view.signal('segment', [min, max]); - // } - // segmentChanged = true; - // } + if(this.segmentIsNew(nextProps.segment)) { + if(nextProps.segment.length > 0) { + // Set segmented domain + this.view.signal('segment', nextProps.segment) + } else { + // Reset segment to full domain + const xVals = this.props.data.map((d) => d.xRel); + const min = Math.min.apply(null, xVals); + const max = Math.max.apply(null, xVals); + this.view.signal('segment', [min, max]); + } + segmentChanged = true; + } if(nextProps.currentTime != this.props.currentTime) { this.view.signal('videoTime', nextProps.currentTime); @@ -78,8 +78,16 @@ export default class CanGraph extends Component { } onSignalSegment(signal, segment) { - console.log(signal, segment); + if(!Array.isArray(segment)) { + return; + } + this.props.onSegmentChanged(segment); + if(this.view) { + const state = this.view.getState(); + state.subcontext[0].signals.brush = 0; + this.view = this.view.setState(state); + } } render() { diff --git a/src/components/explorer.js b/src/components/explorer.js index d59b1f2..faa0685 100644 --- a/src/components/explorer.js +++ b/src/components/explorer.js @@ -38,7 +38,6 @@ export default class Explorer extends Component { this.onSignalPlotPressed = this.onSignalPlotPressed.bind(this); this.onSignalUnplotPressed = this.onSignalUnplotPressed.bind(this); this.onSegmentChanged = this.onSegmentChanged.bind(this); - this.resetSegment = this.resetSegment.bind(this); this.showAddSignal = this.showAddSignal.bind(this); this.onGraphTimeClick = this.onGraphTimeClick.bind(this); this.onUserSeek = this.onUserSeek.bind(this); @@ -186,15 +185,6 @@ export default class Explorer extends Component { return msg.entries[userSeekIndex].time; } - relativeSegment() { - const {segment} = this.state; - if(segment.length === 2) { - return [segment[0] - this.props.firstCanTime, - segment[1] - this.props.firstCanTime]; - } - return []; - } - addSignalsHeader() { const {shouldShowAddSignal} = this.state; return (
: null} + {this.state.segment.length > 0 ? +
this.resetSegment()}> +

Reset Segment

+
+ : null} {this.state.plottedSignals.map(({messageId, name}) => { const msg = this.props.messages[messageId]; @@ -254,7 +250,7 @@ export default class Explorer extends Component { messageName={msg.name} signalSpec={msg.signals[name]} onSegmentChanged={this.onSegmentChanged} - segment={this.relativeSegment()} + segment={this.state.segment} data={this.graphData(msg, name)} onRelativeTimeClick={this.onGraphTimeClick} currentTime={this.state.seekTime - this.props.firstCanTime} />; @@ -292,5 +288,19 @@ const Styles = StyleSheet.create({ borderBottom: '1px solid #000', display: 'flex', flexDirection: 'row' + }, + reset: { + cursor: 'pointer', + backgroundColor: 'RGB(63, 135, 255)', + borderRadius: 5, + height: 30, + width: 120, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: 'white', + ':hover': { + backgroundColor: 'RGBA(63, 135, 255, 0.5)' + } } }) diff --git a/src/vega/CanPlot.js b/src/vega/CanPlot.js index e2a9317..fcfd729 100644 --- a/src/vega/CanPlot.js +++ b/src/vega/CanPlot.js @@ -98,10 +98,6 @@ export default createClassFromSpec('CanPlot', { { "events": {"signal": "delta"}, "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)" - }, - { - "events": "window:mouseup", - "update": "[]" } ] }, @@ -129,7 +125,7 @@ export default createClassFromSpec('CanPlot', { "on": [ { "events": "window:mouseup", - "update": "span(brush) ? invert('xrelscale', brush) : null" + "update": "span(brush) ? invert('xrelscale', brush) : segment" } ] }