Add Signal Mouseover Highlighting, Correct Hiding Plotted Signals (#84)

* add signal mouseover highlighting in legend

* refresh graph data with new plottedSignals when hiding plot

src/components/CanGraph.js

@@ -249,4 +249,3 @@ export default class CanGraph extends Component {
         );
     }
 }
-

src/components/Explorer/explorer.scss

@@ -247,6 +247,7 @@
           height: $signal-color-size;
           float: left;
           margin: 1px -3px 0 -25px;
+          opacity: .5;
           width: $signal-color-size;
         }
       }

src/components/SignalLegend.js

@@ -50,13 +50,11 @@ export default class SignalLegend extends Component {
         const signalRowsNested = Object.entries(signals).map(([signalName, signal]) => {
             const color = signals[signalName].colors();
             const isHighlighted = highlightedSignal === signalName;
-            const highlightedStyle = isHighlighted ? this.props.signalStyles[signalName] : null;
 
             return <SignalLegendEntry
                       key={signal.uid}
                       signal={signal}
                       isHighlighted={isHighlighted}
-                      highlightedStyle={highlightedStyle}
                       color={color}
                       onSignalHover={this.props.onSignalHover}
                       onSignalHoverEnd={this.props.onSignalHoverEnd}

src/components/SignalLegend/signalLegend.scss

@@ -42,11 +42,16 @@
       display: block;
     }
   }
+  &.is-highlighted {
+    .signals-legend-entry-color {
+      opacity: .5;
+    }
+  }
   &-color {
     display: block;
     height: 100%;
     left: 0;
-    opacity: .5;
+    opacity: .3;
     position: absolute;
     width: 1.5%;
   }

src/components/SignalLegendEntry.js

@@ -12,8 +12,8 @@ import {swapKeysAndValues} from '../utils/object';
 
 export default class SignalLegendEntry extends Component {
     static propTypes = {
-        highlightedStyle: PropTypes.object,
         signal: PropTypes.instanceOf(Signal).isRequired,
+        isHighlighted: PropTypes.bool,
         onSignalHover: PropTypes.func,
         onSignalHoverEnd: PropTypes.func,
         onTentativeSignalChange: PropTypes.func,
@@ -351,13 +351,14 @@ export default class SignalLegendEntry extends Component {
 
     render() {
         const {isExpanded, isEditing, signalEdited, nameEdited} = this.state;
-        const {signal, highlightedStyle, plottedSignals, isPlotted} = this.props;
+        const {signal, plottedSignals, isPlotted} = this.props;
         const expandedEntryClass = this.props.isExpanded ? 'is-expanded' : null;
+        const highlightedEntryClass = this.props.isHighlighted ? 'is-highlighted' : null;
         const plottedButtonClass = this.props.isPlotted ? 'button' : 'button--alpha';
         const plottedButtonText = this.props.isPlotted ? 'Hide Plot' : 'Show Plot';
         return (
           <div
-              className={cx('signals-legend-entry', expandedEntryClass)}
+              className={cx('signals-legend-entry', expandedEntryClass, highlightedEntryClass)}
               onMouseEnter={() => this.props.onSignalHover(signal)}
               onMouseLeave={() => this.props.onSignalHoverEnd(signal)}>
               <div className='signals-legend-entry-color'

src/components/explorer.js

@@ -278,7 +278,7 @@ export default class Explorer extends Component {
                                   (plot.filter((signal) => !(signal.messageId === messageId && signal.signalName === name))))
                                   .filter((plot) => plot.length > 0);
 
-        this.setState({plottedSignals: newPlottedSignals}, this.refreshGraphData);
+        this.setState({plottedSignals: newPlottedSignals}, this.refreshGraphData(this.props.messages, newPlottedSignals));
     }
 
     updateSegment = debounce((messageId, segment) => {