cabana: segmentation on graphs works

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() {

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 (<div className={css(Styles.addSignalsHeader)}
@@ -246,6 +236,12 @@ export default class Explorer extends Component {
                                                 onPause={this.onPause}
                                 /> : null}
 
+                            {this.state.segment.length > 0 ?
+                                <div className={css(Styles.reset)}
+                                     onClick={() => this.resetSegment()}>
+                                    <p>Reset Segment</p>
+                                </div>
+                                : 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)'
+        }
     }
 })

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"
             }
           ]
         }