Make it easier to differentiate between same signal messages

src/components/AddSignals.js

@@ -48,7 +48,8 @@ export default class AddSignals extends Component {
     onConfirmedSignalChange: PropTypes.func,
     messageIndex: PropTypes.number,
     onSignalPlotChange: PropTypes.func,
-    plottedSignalUids: PropTypes.array
+    plottedSignalUids: PropTypes.array,
+    selectedMessageKey: PropTypes.string
   };
 
   constructor(props) {
@@ -91,7 +92,7 @@ export default class AddSignals extends Component {
   }
 
   signalColorStyle(signal) {
-    const { colors } = signal;
+    const colors = signal.getColors(this.props.selectedMessageKey);
 
     let colorRgbStr;
     let backgroundColor;
@@ -130,10 +131,10 @@ export default class AddSignals extends Component {
     return signalStyles;
   }
 
-  componentWillReceiveProps({ message }) {
-    const isNewMessage = message.address !== this.props.message.address;
-    if (isNewMessage) {
-      const signals = message.frame ? message.frame.signals : {};
+  componentWillReceiveProps(newProps) {
+    if (newProps.message.address !== this.props.message.address
+      || newProps.selectedMessageKey !== this.props.selectedMessageKey) {
+      const signals = newProps.message.frame ? newProps.message.frame.signals : {};
 
       this.setState(
         { signals: this.copySignals(signals) },
@@ -529,6 +530,7 @@ export default class AddSignals extends Component {
   };
 
   render() {
+    const { selectedMessageKey } = this.props;
     return (
       <div className="cabana-explorer-signals-controller">
         {Object.keys(this.state.signals).length === 0 ? (
@@ -558,6 +560,7 @@ export default class AddSignals extends Component {
           onSignalRemove={this.onSignalRemove}
           onSignalPlotChange={this.onSignalPlotChange}
           plottedSignalUids={this.props.plottedSignalUids}
+          selectedMessageKey={selectedMessageKey}
         />
       </div>
     );

src/components/CanGraph.js

@@ -347,7 +347,7 @@ export default class CanGraph extends Component {
               const signal = Object.values(
                 this.props.messages[messageId].frame.signals
               ).find((s) => s.uid === signalUid);
-              const { colors } = signal;
+              const colors = signal.getColors(messageId);
 
               return (
                 <div
@@ -364,7 +364,7 @@ export default class CanGraph extends Component {
                   </div>
                   <div className="cabana-explorer-visuals-plot-header-copy">
                     <div className="cabana-explorer-visuals-plot-message">
-                      <span>{messageName}</span>
+                      <span>{messageName} {messageId}</span>
                     </div>
                     <div className="cabana-explorer-visuals-plot-signal">
                       <div

src/components/Explorer.js

@@ -407,6 +407,7 @@ export default class Explorer extends Component {
               messageIndex={this.props.seekIndex}
               onSignalPlotChange={this.onSignalPlotChange}
               plottedSignalUids={this.selectedMessagePlottedSignalUids()}
+              selectedMessageKey={selectedMessageKey}
             />
           ) : null}
           <CanLog

src/components/SignalLegend.js

@@ -16,7 +16,8 @@ export default class SignalLegend extends Component {
     onSignalChange: PropTypes.func,
     onSignalRemove: PropTypes.func,
     onSignalPlotChange: PropTypes.func,
-    plottedSignalUids: PropTypes.array
+    plottedSignalUids: PropTypes.array,
+    selectedMessageKey: PropTypes.string
   };
 
   state = {
@@ -39,7 +40,7 @@ export default class SignalLegend extends Component {
   }
 
   render() {
-    const { signals, highlightedSignal } = this.props;
+    const { signals, highlightedSignal, selectedMessageKey } = this.props;
     const signalRowsNested = Object.entries(signals)
       .sort(([_, signal1], [__, signal2]) => {
         if (signal1.startBit < signal2.startBit) {
@@ -48,7 +49,7 @@ export default class SignalLegend extends Component {
         return 1;
       })
       .map(([signalName, signal]) => {
-        const { colors } = signals[signalName];
+        const colors = signals[signalName].getColors(selectedMessageKey);
         const isHighlighted = highlightedSignal === signalName;
 
         return (

src/models/can/signal.js

@@ -49,7 +49,16 @@ export default class Signal {
       min,
       max,
       uid,
-      colors
+      _colors: colors
+    });
+
+    Object.defineProperty(this, 'colors', {
+      get: function () {
+        console.error('Something is still using the old colors');
+        debugger;
+        return colors;
+      },
+      enumberable: false
     });
   }
 
@@ -155,6 +164,13 @@ export default class Signal {
     return this.offset + rawMax * this.factor;
   }
 
+  getColors(messageId) {
+    const parts = messageId.split(':').map(p => Number.parseInt(p, 16) % 255);
+    const colors = this._colors || this.generateColors();
+
+    return colors.map((c) => parts.reduce((m, v) => m ^ v, c));
+  }
+
   generateColors() {
     const colors = Array(3);
     for (let i = 0; i < 3; i++) {

src/models/graph-data.js

@@ -1,6 +1,10 @@
 import ArrayUtils from '../utils/array';
 import { CAN_GRAPH_MAX_POINTS } from '../config';
 
+function signalColors(signal, msg) {
+  return signal.colors.map((v) => (v ^ msg.address) ^ msg.bus);
+}
+
 function _calcGraphData(msg, signalUid, firstCanTime) {
   if (!msg) return null;
 
@@ -26,6 +30,8 @@ function _calcGraphData(msg, signalUid, firstCanTime) {
   if (!samples.length) {
     return [];
   }
+
+  const colors = signal.getColors(msg.id);
   // sorting these doesn't fix the phantom lines
   let lastEntry = samples[0].relTime;
   return samples
@@ -41,7 +47,7 @@ function _calcGraphData(msg, signalUid, firstCanTime) {
         relTime: entry.relTime,
         y: entry.signals[signal.name],
         unit: signal.unit,
-        color: `rgba(${signal.colors.join(',')}, 0.5)`,
+        color: `rgba(${colors.join(',')}, 0.5)`,
         signalName: signal.name,
         signalUid
       };
@@ -170,4 +176,4 @@ function appendNewGraphData(plottedSignals, graphData, messages, firstCanTime) {
   return [...graphData];
 }
 
-export default { _calcGraphData, appendNewGraphData };
+export default { _calcGraphData, appendNewGraphData, signalColors };