cabana: lift seek state up to CanExplorer.js; fix bug where seek marker would overlap video play button

src/CanExplorer.js

@@ -39,7 +39,8 @@ export default class CanExplorer extends Component {
             dbc: new DBC(),
             dbcFilename: 'New DBC',
             dbcLastSaved: null,
-            seekTime: 0
+            seekTime: 0,
+            seekIndex: 0,
         };
 
         this.showLoadDbc = this.showLoadDbc.bind(this);
@@ -53,6 +54,7 @@ export default class CanExplorer extends Component {
         this.onConfirmedSignalChange = this.onConfirmedSignalChange.bind(this);
         this.onPartChange = this.onPartChange.bind(this);
         this.onMessageFrameEdited = this.onMessageFrameEdited.bind(this);
+        this.onSeek = this.onSeek.bind(this);
     }
 
     componentWillMount() {
@@ -161,7 +163,8 @@ export default class CanExplorer extends Component {
       worker.postMessage({dbcText: dbc.text(),
                           base: route.url,
                           num: part,
-                          canStartTime: firstCanTime});
+                          canStartTime: firstCanTime,
+                        });
     }
 
     showLoadDbc() {
@@ -243,8 +246,23 @@ export default class CanExplorer extends Component {
       this.hideEditMessageModal();
     }
 
-    onSeek(seekTime) {
+    onSeek(seekIndex, seekTime) {
-      this.setState({seekTime});
+      this.setState({seekIndex, seekTime});
+    }
+
+    onMessageSelected(msgKey) {
+      let {seekTime, seekIndex, messages} = this.state;
+      const msg = messages[msgKey];
+      if(seekTime > 0) {
+          seekIndex = msg.entries.findIndex((e) => e.relTime >= seekTime);
+          if(seekIndex === -1) {
+              seekIndex = 0;
+          }
+
+          seekTime = msg.entries[seekIndex].relTime;
+      }
+
+      this.setState({seekTime, seekIndex, selectedMessage: msgKey});
     }
 
     render() {
@@ -274,7 +292,9 @@ export default class CanExplorer extends Component {
                             onConfirmedSignalChange={this.onConfirmedSignalChange}
                             onSeek={this.onSeek}
                             canFrameOffset={this.state.canFrameOffset}
-                            firstCanTime={this.state.firstCanTime} /> : null}
+                            firstCanTime={this.state.firstCanTime}
+                            seekTime={this.state.seekTime}
+                            seekIndex={this.state.seekIndex} /> : null}
                     </div>
 
                     {this.state.showLoadDbc ? <LoadDbcModal

src/components/RouteSeeker.js

@@ -87,7 +87,10 @@ export default class RouteSeeker extends Component {
 
     onMouseMove(e) {
         const markerOffsetPct = this.mouseEventXOffsetPercent(e);
-
+        if(markerOffsetPct < 0) {
+            this.onMouseLeave();
+            return;
+        }
         const markerWidth = Styles.marker._definition.width;
 
         const markerLeft = `calc(${markerOffsetPct + '%'} - ${markerWidth / 2}px)`;

src/components/explorer.js

@@ -21,7 +21,8 @@ export default class Explorer extends Component {
        messages: PropTypes.objectOf(PropTypes.object),
        onConfirmedSignalChange: PropTypes.func,
        canFrameOffset: PropTypes.number,
-       firstCanTime: PropTypes.number
+       firstCanTime: PropTypes.number,
+       onSeek: PropTypes.func
     };
 
     constructor(props) {
@@ -39,8 +40,6 @@ export default class Explorer extends Component {
             segmentIndices: [],
             shouldShowAddSignal: true,
             userSeekIndex: 0,
-            seekIndex: 0,
-            seekTime: 0,
             playing: false,
         };
         this.onSignalPlotPressed = this.onSignalPlotPressed.bind(this);
@@ -70,7 +69,7 @@ export default class Explorer extends Component {
             // by finding new message entry indices
             // corresponding to old message segment/seek times.
 
-            let {segment, segmentIndices, userSeekIndex, seekIndex, seekTime} = this.state;
+            let {segment, segmentIndices, userSeekIndex} = this.state;
             if(segment.length === 2) {
                 const segmentStartIdx = nextMessage.entries.findIndex((e) => e.relTime >= segment[0]);
                 let segmentEndIdx = nextMessage.entries.findIndex((e) => e.relTime >= segment[1]);
@@ -90,20 +89,8 @@ export default class Explorer extends Component {
                 }
             }
 
-            if(seekTime > 0) {
-                seekIndex = nextMessage.entries.findIndex((e) => e.relTime >= seekTime);
-                if(seekIndex === -1) {
-                    seekIndex = 0;
-                }
-
-                seekTime = nextMessage.entries[seekIndex].relTime;
-            }
-
             this.setState({segment,
-                           segmentIndices,
+                           segmentIndices})
-                           seekIndex,
-                           seekTime,
-                           userSeekIndex: seekIndex})
         }
 
         if(nextMessage && curMessage) {
@@ -221,16 +208,21 @@ export default class Explorer extends Component {
     }
 
     onUserSeek(ratio) {
+        const {entries} = this.props.messages[this.props.selectedMessage];
         const userSeekIndex = this.indexFromSeekRatio(ratio);
-        this.setState({seekIndex: userSeekIndex, userSeekIndex});
+        const seekTime = entries[userSeekIndex].relTime;
+
+        this.props.onSeek(userSeekIndex, seekTime);
+        this.setState({userSeekIndex});
     }
 
     onPlaySeek(ratio) {
         const {entries} = this.props.messages[this.props.selectedMessage];
 
         const seekIndex = this.indexFromSeekRatio(ratio);
+        const seekTime = entries[seekIndex].relTime;
 
-        this.setState({seekIndex, seekTime: entries[seekIndex].time});
+        this.props.onSeek(seekIndex, seekTime);
     }
 
     onGraphTimeClick(time) {
@@ -310,10 +302,10 @@ export default class Explorer extends Component {
                                     onConfirmedSignalChange={this.props.onConfirmedSignalChange}
                                     message={this.props.messages[this.props.selectedMessage]}
                                     onClose={() => {this.setState({shouldShowAddSignal: false})}}
-                                    messageIndex={this.state.seekIndex}
+                                    messageIndex={this.props.seekIndex}
                                 /> : null}
                             <CanLog message={this.props.messages[this.props.selectedMessage]}
-                                    messageIndex={this.state.seekIndex}
+                                    messageIndex={this.props.seekIndex}
                                     segmentIndices={this.state.segmentIndices}
                                     plottedSignals={this.state.plottedSignals}
                                     onSignalPlotPressed={this.onSignalPlotPressed}
@@ -328,7 +320,7 @@ export default class Explorer extends Component {
                                                     secondsLoaded={this.secondsLoaded()}
                                                     startOffset={this.startOffset()}
                                                     segmentProgress={this.segmentProgress}
-                                                    seekIndex={this.state.seekIndex}
+                                                    seekIndex={this.props.seekIndex}
                                                     userSeekIndex={this.state.userSeekIndex}
                                                     playing={this.state.playing}
                                                     url={this.props.url}

src/components/meta.js

@@ -23,7 +23,7 @@ export default class Meta extends Component {
         showEditMessageModal: PropTypes.func,
         route: PropTypes.object,
         partsLoaded: PropTypes.array,
-
+        seekTime: PropTypes.number
     };
 
     constructor(props) {
@@ -173,7 +173,7 @@ export default class Meta extends Component {
     }
 
     messageBytes(message) {
-        const {seekTime} = this.state;
+        const {seekTime} = this.props;
         let mostRecentMsgIndex = message.entries.findIndex((e) =>
             e.relTime > seekTime) - 1;
         mostRecentMsgIndex = Math.max(0, mostRecentMsgIndex);
@@ -181,11 +181,14 @@ export default class Meta extends Component {
 
         const msgSize = message.frame ? message.frame.size : 8;
 
-        const byteStyles = mostRecentMsg.byteStateChangeTimes.map((time) =>
+        const byteOpacities = mostRecentMsg.byteStateChangeTimes.map((time) =>
-            1 - ((time - seekTime) / 30)
+            Math.max(0.1, Math.min(1, 1.1 - ((seekTime - time) / 30)))
-        ).map((opacity) => {
+        );
+
+        const byteStyles = byteOpacities.map((opacity) =>
             StyleSheet.create({byteStyle: {opacity}})
-        });
+        );
+
 
         const bytes = byteStyles.map(({byteStyle}, idx) =>
             <div key={idx} className={css(Styles.byte, byteStyle)}></div>
@@ -377,6 +380,7 @@ const Styles = StyleSheet.create({
     byte: {
         width: 15,
         height: 15,
-        border: '1px solid rgba(0,0,0,0.9)'
+        border: '1px solid rgba(0,0,0,0.9)',
+        backgroundColor: 'red'
     }
 });

src/styles/modal-tabs.js

@@ -0,0 +1,16 @@
+import {StyleSheet} from 'aphrodite/no-important';
+
+export default StyleSheet.create({
+  tab: {
+    display: 'inline',
+    marginRight: 20,
+    cursor: 'pointer'
+  },
+  selectedTab: {
+    borderBottom: '2px solid #000',
+    fontWeight: 'bold'
+  },
+  tabContent: {
+    paddingTop: 20
+  }
+});

src/workers/can-fetcher.worker.js

@@ -10,7 +10,8 @@ function createMessageSpec(dbc, address, id, bus) {
             id: id,
             bus: bus,
             entries: [],
-            frame: dbc.messages.get(address)}
+            frame: dbc.messages.get(address),
+            signalAggregates: {}}
 }
 
 async function loadCanPart(dbc, base, num, canStartTime) {
@@ -35,13 +36,13 @@ async function loadCanPart(dbc, base, num, canStartTime) {
        const prevMsg = messages[id].entries.length > 0 ?
                         messages[id].entries[messages[id].entries.length - 1] : null;
 
-       const msg = DbcUtils.parseMessage(dbc,
+       const msgEntry = DbcUtils.parseMessage(dbc,
-                                         t,
+                                              t,
-                                         address.toNumber(),
+                                              address.toNumber(),
-                                         data,
+                                              data,
-                                         canStartTime,
+                                              canStartTime,
-                                         prevMsg);
+                                              prevMsg);
-       messages[id].entries.push(msg);
+       messages[id].entries.push(msgEntry);
   }
 
   self.postMessage(messages);