cabana: signal editor now lives above the log; log scrolls live w/ playing video

src/CanExplorer.js

@@ -200,7 +200,8 @@ export default class CanExplorer extends Component {
                           showSaveDbc={this.showSaveDbc}
                           dbcFilename={this.state.dbcFilename}
                           dbcLastSaved={this.state.dbcLastSaved} />
-                    {Object.keys(this.state.messages).length > 0 ?
+                    {Object.keys(this.state.messages).length > 0
+                      && this.state.selectedMessage ?
                       <Explorer
                           url={this.state.route.url}
                           messages={this.state.messages}

src/components/AddSignals.js

@@ -323,11 +323,6 @@ export default class AddSignals extends Component {
 
     render() {
         return (<div className={css(Styles.root)}>
-                    <p>Edit Signals</p>
-                    <p onClick={this.props.onClose}
-                       className={css(Styles.pointer)}>
-                       Close
-                    </p>
                     {this.bitMatrix()}
                     <SignalLegend
                         signals={this.state.signals}

src/components/CanLog.js

@@ -16,7 +16,6 @@ export default class CanLog extends Component {
       onSignalUnplotPressed: PropTypes.func,
       onSignalPlotPressed: PropTypes.func,
       message: PropTypes.object,
-      showAddSignal: PropTypes.func,
       messageIndex: PropTypes.number
     };
 
@@ -49,7 +48,8 @@ export default class CanLog extends Component {
       const curMessageLength = this.props.message ? this.props.message.entries.length : 0;
       const nextMessageLength = nextProps.message ? nextProps.message.entries.length : 0;
 
-      return nextMessageLength != curMessageLength
+      const shouldUpdate = nextMessageLength != curMessageLength
+        || nextProps.messageIndex != this.props.messageIndex
         || nextProps.plottedSignals.length != this.props.plottedSignals.length
         || JSON.stringify(nextProps.segmentIndices) != JSON.stringify(this.props.segmentIndices)
         || JSON.stringify(nextState) != JSON.stringify(this.state)
@@ -60,6 +60,7 @@ export default class CanLog extends Component {
             && !elementWiseEquals(
                 Object.keys(this.props.message.signals),
                 Object.keys(nextProps.message.signals)));
+      return shouldUpdate;
     }
 
     addDisplayedMessages() {
@@ -115,10 +116,6 @@ export default class CanLog extends Component {
                               }
                             </tr>);
                   })}
-                  <tr>
-                    <td onClick={this.props.showAddSignal}
-                        className={css(Styles.pointerUnderlineHover)}>Edit Signals</td>
-                  </tr>
                 </tbody>
               </table>
             </div>
@@ -144,7 +141,7 @@ export default class CanLog extends Component {
                            this.expandMessage(msg);
                          }
                          }}>
-                          {msgIsExpanded ? <div className={css(Styles.col)}>&uarr;</div>
+                          {msgIsExpanded ? <div className={css(Styles.col)}>&rarr;</div>
                           :
                           <div className={css(Styles.col)}>&darr;</div>}
                     <div className={css(Styles.col, Styles.timefieldCol)}>

src/components/HLS.js

@@ -27,7 +27,6 @@ export default class HLS extends Component {
     } else {
       this.videoElement.pause();
     }
-
   }
 
   componentDidMount() {

src/components/explorer.js

@@ -197,6 +197,18 @@ export default class Explorer extends Component {
         return [];
     }
 
+    addSignalsHeader() {
+        const {shouldShowAddSignal} = this.state;
+        return (<div className={css(Styles.addSignalsHeader)}
+                     onClick={() => this.setState({shouldShowAddSignal: !this.state.shouldShowAddSignal})}>
+                    {shouldShowAddSignal ?
+                        <p>&darr;</p>
+                        :
+                        <p>&rarr;</p>}
+                    <p>Edit Signals</p>
+                </div>);
+    }
+
     render() {
         return (<div className={css(Styles.root)}>
                     <CanHistogram
@@ -208,6 +220,7 @@ export default class Explorer extends Component {
                     />
                     <div className={css(Styles.dataContainer)}>
                         <div className={css(Styles.left)}>
+                            {this.addSignalsHeader()}
                             {this.state.shouldShowAddSignal ?
                                 <AddSignals
                                     onConfirmedSignalChange={this.props.onConfirmedSignalChange}
@@ -280,5 +293,11 @@ const Styles = StyleSheet.create({
     },
     right: {
         flex: '4 1',
+    },
+    addSignalsHeader: {
+        cursor: 'pointer',
+        borderBottom: '1px solid #000',
+        display: 'flex',
+        flexDirection: 'row'
     }
 })