cabana: fix part selection times on shared routes; fix bug where plotting a new signal would fail until data re-processed

src/CanExplorer.js

@@ -108,7 +108,9 @@ export default class CanExplorer extends Component {
       const {dongleId, name, isDemo} = this.props;
       if(this.props.max && this.props.url) {
         const {max, url} = this.props;
-        const route = {fullname: name, proclog: max, url: url};
+        const {startTime} = Routes.parseRouteName(name);
+
+        const route = {fullname: name, proclog: max, url: url, start_time: startTime};
         this.setState({route, currentParts: [0, Math.min(max - 1, PART_SEGMENT_LENGTH - 1)]}, this.initCanData);
       } else if(dongleId && name) {
         Routes.fetchRoutes(dongleId).then((routes) => {
@@ -318,11 +320,20 @@ export default class CanExplorer extends Component {
                           canStartTime: this.state.firstCanTime});
     }
 
+    updateMessageFrame(messageId, frame) {
+      const {messages} = this.state;
+
+      messages[messageId].frame = frame;
+      this.setState({messages});
+    }
+
     onConfirmedSignalChange(message, signals) {
       const {dbc, dbcFilename, route} = this.state;
 
       dbc.setSignals(message.address, {...signals});
 
+      this.updateMessageFrame(message.id, dbc.messages.get(message.address));
+
       if(route) {
         persistDbc(route.fullname,
                    {dbcFilename, dbc});
@@ -568,6 +579,7 @@ export default class CanExplorer extends Component {
         });
     }
 
+
     render() {
         return (
             <div id='cabana' className={ cx({ 'is-showing-modal': this.showingModal() }) }>
@@ -624,7 +636,7 @@ export default class CanExplorer extends Component {
                           autoplay={this.props.autoplay}
                           showEditMessageModal={this.showEditMessageModal}
                           onPartChange={this.onPartChange}
-                          route={this.state.route}
+                          routeStartTime={this.state.route ? this.state.route.start_time : 0}
                           partsCount={this.state.route ? this.state.route.proclog : 0}
                            />
                           : null}

src/api/routes.js

@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie';
+import Moment from 'moment';
 
 const ROUTES_ENDPOINT = 'https://api.commadotai.com/v1/{dongleId}/routes/';
 
@@ -105,3 +106,8 @@ export async function fetchRoutes(dongleId) {
 export function cameraPath(routeUrl, frame) {
   return `${routeUrl}/sec${frame}.jpg`
 }
+
+export function parseRouteName(name) {
+  const startTime = Moment(name, "YYYY-MM-DD--H-m-s");
+  return {startTime};
+}

src/components/explorer.js

@@ -286,13 +286,13 @@ export default class Explorer extends Component {
     }
 
     timeWindow() {
-        const {route, currentParts} = this.props;
-        if(route) {
+        const {routeStartTime, currentParts} = this.props;
+        if(routeStartTime) {
             const partStartOffset = currentParts[0] * 60,
                   partEndOffset = (currentParts[1] + 1) * 60;
 
-            const windowStartTime = Moment(route.start_time).add(partStartOffset, 's').format('HH:mm:ss');
-            const windowEndTime = Moment(route.start_time).add(partEndOffset, 's').format('HH:mm:ss');
+            const windowStartTime = routeStartTime.clone().add(partStartOffset, 's').format('HH:mm:ss');
+            const windowEndTime = routeStartTime.clone().add(partEndOffset, 's').format('HH:mm:ss');
 
             return `${windowStartTime} - ${windowEndTime}`;
         } else return '';

src/components/meta.js

@@ -251,19 +251,6 @@ export default class Meta extends Component {
         );
     }
 
-    timeWindow() {
-        const {route, currentParts} = this.props;
-        if(route) {
-            const partStartOffset = currentParts[0] * 60,
-                  partEndOffset = (currentParts[1] + 1) * 60;
-
-            const windowStartTime = Moment(route.start_time).add(partStartOffset, 's').format('HH:mm:ss');
-            const windowEndTime = Moment(route.start_time).add(partEndOffset, 's').format('HH:mm:ss');
-
-            return `${windowStartTime} - ${windowEndTime}`;
-        } else return '';
-    }
-
     shareUrl() {
         const add = {max: this.props.route.proclog, url: this.props.route.url};
         const remove = [GITHUB_AUTH_TOKEN_KEY]; // don't share github access