cabana: colors are now randomized and set when dbc loads or signal is created

src/components/AddSignals.js

@@ -95,7 +95,7 @@ export default class AddSignals extends Component {
     }
 
     signalColorStyle(signal) {
-        const colors = signal.colors();
+        const { colors } = signal;
 
         let colorRgbStr, backgroundColor;
         if(this.state && this.state.highlightedSignal === signal.name) {

src/components/CanGraph.js

@@ -219,7 +219,7 @@ export default class CanGraph extends Component {
                     </div>
                     {this.props.plottedSignals.map(({ messageId, signalUid, messageName }) => {
                         const signal = Object.values(this.props.messages[messageId].frame.signals).find((s) => s.uid === signalUid);
-                        const color = signal.colors();
+                        const { colors } = signal;
 
                         return (
                           <div className='cabana-explorer-visuals-plot-header'
@@ -236,7 +236,7 @@ export default class CanGraph extends Component {
                                   </div>
                                   <div className='cabana-explorer-visuals-plot-signal'>
                                       <div className='cabana-explorer-visuals-plot-signal-color'
-                                            style={{background: `rgb(${color}`}}></div>
+                                            style={{background: `rgb(${colors}`}}></div>
                                       <strong>{signal.name}</strong>
                                   </div>
                               </div>

src/components/SignalLegend.js

@@ -53,14 +53,14 @@ export default class SignalLegend extends Component {
               }
             })
             .map(([signalName, signal]) => {
-            const color = signals[signalName].colors();
+            const { colors } = signals[signalName];
             const isHighlighted = highlightedSignal === signalName;
 
             return <SignalLegendEntry
                       key={signal.uid}
                       signal={signal}
                       isHighlighted={isHighlighted}
-                      color={color}
+                      color={colors}
                       onSignalHover={this.props.onSignalHover}
                       onSignalHoverEnd={this.props.onSignalHoverEnd}
                       onTentativeSignalChange={this.props.onTentativeSignalChange}

src/components/SignalLegendEntry.js

@@ -142,7 +142,6 @@ export default class SignalLegendEntry extends Component {
         this.state = {
             isExpanded: false,
             signalEdited: Object.assign(Object.create(props.signal), props.signal),
-            nameEdited: props.signal.name
         };
 
         this.toggleEditing = this.toggleEditing.bind(this);

src/models/can/signal.js

@@ -47,7 +47,9 @@ export default class Signal {
             max = this.calculateMax();
         }
 
-        Object.assign(this, {min, max, uid});
+        const colors = this.generateColors();
+
+        Object.assign(this, {min, max, uid, colors});
     }
 
     text() {
@@ -198,13 +200,10 @@ export default class Signal {
         return ival;
     }
 
-    colors() {
-        const signalNameHashHex = hash(this.name);
-
-        let colors = [255,255,255];
-        const step = Math.ceil(signalNameHashHex.length/3);
-        for(let i = 0; i < signalNameHashHex.length; i+= step) {
-            colors[i / step] = ((step + signalNameHashHex.charCodeAt(i) << 5 * (i + 8))) % 255;
+    generateColors() {
+        let colors = Array(3);
+        for(let i = 0; i < 3; i++) {
+            colors[i] = Math.floor(Math.random() * 255);
         }
 
         return colors;

src/models/graph-data.js

@@ -27,7 +27,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(${signal.colors.join(",")}, 0.5)`,
                         signalName: signal.name,
                         signalUid}
     });