cabana: relative time on cangraph and canlog

src/components/CanGraph.js

@@ -15,7 +15,7 @@ export default class CanGraph extends Component {
     signalSpec: PropTypes.instanceOf(Signal),
     segment: PropTypes.array,
     unplot: PropTypes.func,
-    onTimeClick: PropTypes.func,
+    onRelativeTimeClick: PropTypes.func,
     currentTime: PropTypes.number
   };
 
@@ -41,7 +41,7 @@ export default class CanGraph extends Component {
           this.view.signal('segment', nextProps.segment)
         } else {
           // Reset segment to full domain
-          const xVals = this.props.data.map((d) => d.x);
+          const xVals = this.props.data.map((d) => d.xRel);
           const min = Math.min.apply(null, xVals);
           const max = Math.max.apply(null, xVals);
           this.view.signal('segment', [min, max]);
@@ -71,7 +71,7 @@ export default class CanGraph extends Component {
 
   onSignalClickTime(signal, clickTime) {
     if(clickTime !== undefined) {
-      this.props.onTimeClick(clickTime);
+      this.props.onRelativeTimeClick(clickTime);
     }
   }
 

src/components/NearestFrame.js

@@ -76,17 +76,15 @@ export default class NearestFrame extends Component {
         return (<div className={css(Styles.loadingOverlay)}>
                     <img className={css(Styles.loadingSpinner)}
                          src="/img/loading.svg"
-                        />}
+                        />
                 </div>);
     }
 
     onLoadStart() {
-        console.log('onLoadStart')
         this.setState({isLoading: true});
     }
 
     onLoadEnd() {
-        console.log('onLoadEnd')
         this.setState({isLoading: false});
     }
 

src/components/explorer.js

@@ -68,6 +68,7 @@ export default class Explorer extends Component {
 
         return samples.map((entry) => {
             return {x: entry.time,
+                    xRel: entry.time - this.props.firstCanTime,
                     y: entry.signals[signalName],
                     unit: msg.signals[signalName].unit}
         });
@@ -134,9 +135,11 @@ export default class Explorer extends Component {
     }
 
     onGraphTimeClick(time) {
+        const canTime = time + this.props.firstCanTime;
+
         const {segmentIndices} = this.state;
         const {entries} = this.props.messages[this.props.selectedMessage];
-        const userSeekIndex = Entries.findTimeIndex(entries, time);
+        const userSeekIndex = Entries.findTimeIndex(entries, canTime);
 
         this.setState({userSeekIndex, playing: true});
     }
@@ -191,6 +194,15 @@ export default class Explorer extends Component {
         return msg.entries[userSeekIndex].time;
     }
 
+    relativeSegment() {
+        const {segment} = this.state;
+        if(segment.length === 2) {
+            return [segment[0] - this.props.firstCanTime,
+                    segment[1] - this.props.firstCanTime];
+        }
+        return [];
+    }
+
     render() {
         return (<div className={css(Styles.root)}>
                     {this.props.messages[this.props.selectedMessage] !== undefined ?
@@ -249,10 +261,10 @@ export default class Explorer extends Component {
                                                  unplot={() => {this.onSignalUnplotPressed(messageId, name)}}
                                                  messageName={msg.name}
                                                  signalSpec={msg.signals[name]}
-                                                 segment={this.state.segment}
+                                                 segment={this.relativeSegment()}
                                                  data={this.graphData(msg, name)}
-                                                 onTimeClick={this.onGraphTimeClick}
-                                                 currentTime={this.state.seekTime} />;
+                                                 onRelativeTimeClick={this.onGraphTimeClick}
+                                                 currentTime={this.state.seekTime - this.props.firstCanTime} />;
                             })}
                         </div>
                     </div>

src/models/can/dbc.js

@@ -34,7 +34,6 @@ export function swapOrder(arr, wordSize, gSize) {
 }
 
 export default class DBC {
-
     constructor(dbcString) {
         this.dbcText = dbcString;
         this.importDbcString(dbcString);

src/models/can/frame.js

@@ -27,4 +27,4 @@ export default class Frame {
 
         return this.header() + "\n" + signals;
     }
-}
+}

src/vega/CanPlot.js

@@ -10,17 +10,17 @@ export default createClassFromSpec('CanPlot', {
       "name": "tipTime",
       "on": [{
         "events": "mousemove",
-        "update": "invert('xscale', x())"
+        "update": "invert('xrelscale', x())"
       }]
     },
     {"name": "clickTime",
      "on": [{
         "events": "mouseup",
-        "update": "invert('xscale', x())"
+        "update": "invert('xrelscale', x())"
      }]
     },
     {"name": "videoTime"},
-    {"name": "segment", "value": {"data": "table", "field": "x"}}
+    {"name": "segment", "value": {"data": "table", "field": "xRel"}}
   ],
   "data": [
     {
@@ -32,24 +32,30 @@ export default createClassFromSpec('CanPlot', {
       "transform": [
         {
           "type": "filter",
-          "expr": "abs(datum.x - tipTime) <= 0.1"
+          "expr": "abs(datum.xRel - tipTime) <= 0.1"
         },
         {
           "type": "aggregate",
-          "fields": ["x", "y", "unit"],
+          "fields": ["xRel", "y", "unit"],
           "ops": ["min", "argmin", "argmin"],
           "as": ["min", "argmin", "argmin"]
         }
       ]
     }
   ],
-
   "scales": [
     {
       "name": "xscale",
       "type": "linear",
       "range": "width",
       "domain": {"data": "table", "field": "x"},
+      "zero": false
+    },
+    {
+      "name": "xrelscale",
+      "type": "linear",
+      "range": "width",
+      "domain": {"data": "table", "field": "xRel"},
       "zero": false,
       "clamp": true,
       "domainRaw": {"signal": "segment"}
@@ -62,12 +68,10 @@ export default createClassFromSpec('CanPlot', {
       "domain": {"data": "table", "field": "y"}
     }
   ],
-
   "axes": [
-    {"orient": "bottom", "scale": "xscale"},
+    {"orient": "bottom", "scale": "xrelscale"},
     {"orient": "left", "scale": "yscale"}
   ],
-
   "marks": [
     {
       "type": "line",
@@ -75,7 +79,7 @@ export default createClassFromSpec('CanPlot', {
       "interactive": true,
       "encode": {
         "update": {
-          "x": {"scale": "xscale", "field": "x"},
+          "x": {"scale": "xrelscale", "field": "xRel"},
           "y": {"scale": "yscale", "field": "y"}
         },
         "hover": {
@@ -94,19 +98,7 @@ export default createClassFromSpec('CanPlot', {
           "y2": {"field": {"group": "height"}},
           "stroke": {"value": "#000"},
           "strokeWidth": {"value": 2},
-          "x": {"value": 2460}
-        }
-      }
-    },
-    {
-      "type": "rule",
-      "encode": {
-        "update": {
-          "y": {"value": 0},
-          "y2": {"field": {"group": "height"}},
-          "stroke": {"value": "#000"},
-          "strokeWidth": {"value": 2},
-          "x": {"scale": "xscale",
+          "x": {"scale": "xrelscale",
                 "signal": "videoTime", "offset": 0.5}
         }
       }
@@ -116,7 +108,7 @@ export default createClassFromSpec('CanPlot', {
       "from": {"data": "tooltip"},
       "encode": {
         "update": {
-          "x": {"scale": "xscale", "field": "argmin.x"},
+          "x": {"scale": "xrelscale", "field": "argmin.xRel"},
           "y": {"scale": "yscale", "field": "argmin.y"},
           "size": {"value": 50},
           "fill": {"value": "black"}
@@ -129,7 +121,7 @@ export default createClassFromSpec('CanPlot', {
       "interactive": false,
       "encode": {
         "update": {
-          "x": {"scale": "xscale", "field": "argmin.x"},
+          "x": {"scale": "xrelscale", "field": "argmin.xRel"},
           "y": {"scale": "yscale", "field": "argmin.y"},
           "height": {"value": 20},
           "width": {"value": 150},
@@ -145,7 +137,7 @@ export default createClassFromSpec('CanPlot', {
           "interactive": false,
           "encode": {
             "update": {
-              "text": {"signal": "parent.argmin.x + ': ' + parent.argmin.y + ' ' + parent.argmin.unit"},
+              "text": {"signal": "parent.argmin.xRel + ': ' + parent.argmin.y + ' ' + parent.argmin.unit"},
               "fill": {"value": "black"},
               "fontWeight": {"value": "bold"}
             }