cabana: fix video & message selection quirks; use acura route default

src/CanExplorer.js

@@ -47,7 +47,8 @@ export default class CanExplorer extends Component {
             seekTime: 0,
             seekIndex: 0,
             maxByteStateChangeCount: 0,
-            isLoading: true
+            isLoading: true,
+            partsLoaded: 0,
         };
         this.openDbcClient = new OpenDbc(props.githubAuthToken);
 
@@ -64,6 +65,7 @@ export default class CanExplorer extends Component {
         this.onMessageFrameEdited = this.onMessageFrameEdited.bind(this);
         this.onSeek = this.onSeek.bind(this);
         this.onMessageSelected = this.onMessageSelected.bind(this);
+        this.onMessageUnselected = this.onMessageUnselected.bind(this);
         this.initCanData = this.initCanData.bind(this);
     }
 
@@ -126,6 +128,9 @@ export default class CanExplorer extends Component {
       if(part === undefined) {
         part = minPart;
       }
+      if(part === minPart) {
+        this.setState({partsLoaded: 0});
+      }
       if(prevMsgEntries === undefined) {
         prevMsgEntries = {};
       }
@@ -295,6 +300,10 @@ export default class CanExplorer extends Component {
       this.setState({seekTime, seekIndex, selectedMessage: msgKey});
     }
 
+    onMessageUnselected(msgKey) {
+      this.setState({selectedMessage: null});
+    }
+
     render() {
         return (<div className={css(Styles.root)}>
                     {this.state.isLoading ?
@@ -304,9 +313,10 @@ export default class CanExplorer extends Component {
                     <div className={css(Styles.content)}>
                       <Meta url={this.state.route.url}
                             messages={this.state.messages}
-                            partsLoaded={this.state.currentParts}
+                            currentParts={this.state.currentParts}
                             partsCount={this.state.route.proclog || 0}
                             onMessageSelected={this.onMessageSelected}
+                            onMessageUnselected={this.onMessageUnselected}
                             showLoadDbc={this.showLoadDbc}
                             showSaveDbc={this.showSaveDbc}
                             dbcFilename={this.state.dbcFilename}
@@ -318,7 +328,8 @@ export default class CanExplorer extends Component {
                             route={this.state.route}
                             seekTime={this.state.seekTime}
                             maxByteStateChangeCount={this.state.maxByteStateChangeCount}
-                            githubAuthToken={this.props.githubAuthToken} />
+                            githubAuthToken={this.props.githubAuthToken}
+                      />
                       <div className={css(Styles.right)}>
                           {this.state.route.url ?
                             <Explorer
@@ -331,7 +342,8 @@ export default class CanExplorer extends Component {
                                 firstCanTime={this.state.firstCanTime}
                                 seekTime={this.state.seekTime}
                                 seekIndex={this.state.seekIndex}
-                                partsLoaded={this.state.currentParts}
+                                currentParts={this.state.currentParts}
+                                partsLoaded={this.state.partsLoaded}
                                  />
                                 : null}
                       </div>

src/components/explorer.js

@@ -82,7 +82,7 @@ export default class Explorer extends Component {
             this.setState({plottedSignals});
         }
 
-        if(nextProps.selectedMessage != this.props.selectedMessage) {
+        if(nextProps.selectedMessage && nextProps.selectedMessage != this.props.selectedMessage) {
             // Update segment and seek state
             // by finding new message entry indices
             // corresponding to old message segment/seek times.
@@ -124,6 +124,15 @@ export default class Explorer extends Component {
                 this.setState({graphData});
             }
         }
+
+        if(nextProps.partsLoaded !== this.props.partsLoaded && !nextMessage) {
+            let userSeekRatio = this.state.userSeekRatio;
+            const nextSecondsLoaded = this.secondsLoadedRouteRelative(nextProps.currentParts);
+            userSeekRatio = (userSeekRatio * this.secondsLoaded()) / nextSecondsLoaded;
+
+
+            this.setState({userSeekRatio});
+        }
     }
 
     graphData(msg, signalName) {
@@ -275,10 +284,14 @@ export default class Explorer extends Component {
         this.setState({playing: false});
     }
 
+    secondsLoadedRouteRelative(currentParts) {
+        return (currentParts[1] - currentParts[0] + 1) * 60;
+    }
+
     secondsLoaded() {
         const message = this.props.messages[this.props.selectedMessage];
         if(!message) {
-            return this.props.partsLoaded[1] * 60 - this.props.partsLoaded[0] * 60;
+            return this.secondsLoadedRouteRelative(this.props.currentParts);
         }
 
         const {entries} = message;
@@ -295,7 +308,7 @@ export default class Explorer extends Component {
     startOffset() {
         const message = this.props.messages[this.props.selectedMessage];
         if(!message) {
-            return this.props.partsLoaded[0] * 60;
+            return this.props.currentParts[0] * 60;
         }
 
         const {canFrameOffset, firstCanTime} = this.props;
@@ -346,7 +359,7 @@ export default class Explorer extends Component {
 
     selectMessagePrompt() {
         return (<div className={css(Styles.selectMessagePrompt)}>
-                Select a message
+                <Images.leftArrow styles={[Styles.leftArrowStyle]} /> Select a message
                 </div>)
     }
 
@@ -467,6 +480,14 @@ const Styles = StyleSheet.create({
     },
     selectMessagePrompt: {
         alignSelf: 'center',
-        fontSize: 24
+        fontSize: 24,
+        paddingTop: 230,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    leftArrowStyle: {
+        height: 29,
+        width: 29,
     }
 })

src/components/meta.js

@@ -12,6 +12,7 @@ import MessageBytes from './MessageBytes';
 export default class Meta extends Component {
     static propTypes = {
         onMessageSelected: PropTypes.func,
+        onMessageUnselected: PropTypes.func,
         dongleId: PropTypes.string,
         name: PropTypes.string,
         messages: PropTypes.objectOf(PropTypes.object),
@@ -23,7 +24,8 @@ export default class Meta extends Component {
         dbcLastSaved: PropTypes.object, // moment.js object,
         showEditMessageModal: PropTypes.func,
         route: PropTypes.object,
-        partsLoaded: PropTypes.array,
+        partsLoaded: PropTypes.number,
+        currentParts: PropTypes.array,
         seekTime: PropTypes.number
     };
 
@@ -123,6 +125,7 @@ export default class Meta extends Component {
     onMsgRemoveClick(key) {
         let {selectedMessages} = this.state;
         selectedMessages = selectedMessages.filter((m) => m != key);
+        this.props.onMessageUnselected(key);
         this.setState({selectedMessages});
     }
 
@@ -152,7 +155,7 @@ export default class Meta extends Component {
                                                        Styles.selectedMessage)}
                                         onMouseEnter={() => this.onMessageHover(key)}
                                         onMouseLeave={() => this.onMessageHoverEnd(key)}>
-                                        {msg.frame ? msg.frame.name : ''} ({key}) {msg.entries.length}
+                                        {msg.frame ? msg.frame.name : ''} {key}
                                         {hoveredMessages.indexOf(key) !== -1 ? this.hoverButtons(key): null}
                                     </li>
                             });
@@ -268,10 +271,10 @@ export default class Meta extends Component {
     }
 
     timeWindow() {
-        const {route, partsLoaded} = this.props;
+        const {route, currentParts} = this.props;
         if(route) {
-            const partStartOffset = partsLoaded[0] * 60,
-                  partEndOffset = (partsLoaded[1] + 1) * 60;
+            const partStartOffset = currentParts[0] * 60,
+                  partEndOffset = (currentParts[1] + 1) * 60;
 
             const windowStartTime = Moment(route.start_time).add(partStartOffset, 's').format('HH:mm:ss');
             const windowEndTime = Moment(route.start_time).add(partEndOffset, 's').format('HH:mm:ss');
@@ -361,6 +364,10 @@ const Styles = StyleSheet.create({
         marginTop: 5,
         fontSize: 12,
     },
+    selectedMessage: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
     messageList: {
         margin: 0,
         padding: 0

src/index.js

@@ -36,8 +36,10 @@ if(routeFullName) {
       props.dbcFilename = dbcFilename;
     }
 } else {
-    props.dongleId = '3a874b7845c28583';
-    props.name = '2017-06-09--18-23-30';
+    props.dongleId = 'cb38263377b873ee';
+    props.name = '2017-06-12--18-51-47';
+    props.dbc = AcuraDbc;
+    props.dbcFilename = 'acura_ilx_2016_can.dbc';
 }
 
 const authTokenQueryParam = getUrlParameter(GITHUB_AUTH_TOKEN_KEY);