cabana: save per-route dbc changes to localstorage

src/CanExplorer.js

@@ -16,11 +16,14 @@ const CanOffsetFinder = require('./workers/can-offset-finder.worker.js');
 import debounce from './utils/debounce';
 import EditMessageModal from './components/EditMessageModal';
 import LoadingBar from './components/LoadingBar';
+import {persistDbc} from './api/localstorage';
+
 export default class CanExplorer extends Component {
     static propTypes = {
-        dongleId: PropTypes.string,
-        routeName: PropTypes.string,
-        dbc: PropTypes.instanceOf(DBC)
+        dongleId: PropTypes.string.isRequired,
+        routeName: PropTypes.string.isRequired,
+        dbc: PropTypes.instanceOf(DBC),
+        dbcFilename: PropTypes.instanceOf
     };
 
     constructor(props) {
@@ -58,6 +61,7 @@ export default class CanExplorer extends Component {
         this.onMessageFrameEdited = this.onMessageFrameEdited.bind(this);
         this.onSeek = this.onSeek.bind(this);
         this.onMessageSelected = this.onMessageSelected.bind(this);
+        this.initCanData = this.initCanData.bind(this);
     }
 
     componentWillMount() {
@@ -65,43 +69,32 @@ export default class CanExplorer extends Component {
       Routes.fetchRoutes(dongleId).then((routes) => {
         if(routes) {
           const route = routes[name];
-          console.log(route.fullname)
+          const newState = {route, currentParts: [0,2]};
           if(this.props.dbc !== undefined) {
-            this.setState({dbc: this.props.dbc,
-                           dbcFilename: 'acura_ilx_2016.dbc',
-                           route,
-                           currentParts: [0,2]}, () => {
-              const offsetFinder = new CanOffsetFinder();
-              offsetFinder.postMessage({partCount: route.proclog,
-                                        base: route.url});
-
-              offsetFinder.onmessage = (e) => {
-                const {canFrameOffset, firstCanTime} = e.data;
-
-                this.setState({canFrameOffset, firstCanTime}, () => {
-                  this.spawnWorker(this.state.currentParts);
-                });
-              };
-            });
-          } else {
-            this.setState({route, currentParts: [0,2]}, () => {
-              const offsetFinder = new CanOffsetFinder();
-              offsetFinder.postMessage({partCount: route.proclog,
-                                        base: route.url});
-
-              offsetFinder.onmessage = (e) => {
-                const {canFrameOffset, firstCanTime} = e.data;
-
-                this.setState({canFrameOffset, firstCanTime}, () => {
-                  this.spawnWorker(this.state.currentParts);
-                });
-              };
-            });
+            newState.dbc = this.props.dbc;
+            newState.dbcFilename = this.props.dbcFilename;
           }
+          this.setState(newState, this.initCanData);
         }
       });
     }
 
+    initCanData() {
+      const {route} = this.state;
+
+      const offsetFinder = new CanOffsetFinder();
+      offsetFinder.postMessage({partCount: route.proclog,
+                                base: route.url});
+
+      offsetFinder.onmessage = (e) => {
+        const {canFrameOffset, firstCanTime} = e.data;
+
+        this.setState({canFrameOffset, firstCanTime}, () => {
+          this.spawnWorker(this.state.currentParts);
+        });
+      };
+    }
+
     onDbcSelected(filename, dbcInstance) {
       this.hideLoadDbc();
       this.setState({dbc: dbcInstance,
@@ -211,9 +204,12 @@ export default class CanExplorer extends Component {
 
     onConfirmedSignalChange(message) {
       const signals = message.signals;
-      const {dbc} = this.state;
+      const {dbc, dbcFilename, route} = this.state;
 
       dbc.setSignals(message.address, message.signals);
+      persistDbc(route.fullname,
+                 {dbcFilename, dbc});
+
       this.setState({dbc, isLoading: true});
 
       var worker = new MessageParser();
@@ -259,12 +255,19 @@ export default class CanExplorer extends Component {
     }
 
     onMessageFrameEdited(messageFrame) {
-      const msgKey = this.state.editMessageModalMessage
-      const message = Object.assign({}, this.state.messages[msgKey]);
-      message.frame = messageFrame;
+      const {messages,
+             route,
+             dbcFilename,
+             dbc,
+             editMessageModalMessage} = this.state;
 
-      const {messages} = this.state;
-      messages[msgKey] = message;
+      const message = Object.assign({}, messages[editMessageModalMessage]);
+      message.frame = messageFrame;
+      dbc.messages.set(messageFrame.address, messageFrame);
+      persistDbc(route.fullname,
+                 {dbcFilename, dbc});
+
+      messages[editMessageModalMessage] = message;
       this.setState({messages});
       this.hideEditMessageModal();
     }

src/api/github-auth.js

@@ -1,4 +1,4 @@
-import {GITHUB_CLIENT_ID, GITHUB_REDIRECT_URL} from '../config';
+import {GITHUB_CLIENT_ID, GITHUB_REDIRECT_URL, GITHUB_AUTH_TOKEN_KEY} from '../config';
 import {objToQuery, getUrlParameter} from '../utils/url';
 
 function toHex(dec) {
@@ -6,7 +6,7 @@ function toHex(dec) {
 }
 
 export function hasValidAccessToken() {
-  return getUrlParameter('gh_access_token').length > 0;
+  return getUrlParameter(GITHUB_AUTH_TOKEN_KEY) !== null;
 }
 
 export function authorizeUrl(route) {

src/api/localstorage.js

@@ -0,0 +1,17 @@
+import DBC from '../models/can/dbc';
+
+export function fetchPersistedDbc(routeName) {
+  const maybeDbc = window.localStorage.getItem(routeName);
+  if(maybeDbc !== null) {
+    const {dbcFilename, dbcText} = JSON.parse(maybeDbc);
+    const dbc = new DBC(dbcText);
+
+    return {dbc, dbcFilename};
+  } else return null;
+}
+
+export function persistDbc(routeName, {dbcFilename, dbc}) {
+  const dbcJson = JSON.stringify({dbcFilename,
+                                  dbcText: dbc.text()});
+  window.localStorage.setItem(routeName, dbcJson);
+}

src/config.js

@@ -6,5 +6,5 @@ export const GITHUB_CLIENT_ID = ENV_GITHUB_CLIENT_ID[ENV];
 const ENV_GITHUB_REDIRECT_URL = {debug: 'http://127.0.0.1:1235/callback',
                                  prod: 'https://api.comma.ai/cabana/ghcallback'}
 export const GITHUB_REDIRECT_URL = ENV_GITHUB_REDIRECT_URL[ENV];
-
+export const GITHUB_AUTH_TOKEN_KEY = 'gh_access_token';
 export const OPENDBC_SOURCE_REPO = 'commaai/opendbc';

src/index.js

@@ -1,6 +1,6 @@
 import Raven from 'raven-js';
 const opts = {};
-console.log(window.__webpack_hash__)
+
 if(window.__webpack_hash__ !== undefined) {
     opts['release'] = window.__webpack_hash__;
 }
@@ -14,7 +14,8 @@ import ReactDOM from 'react-dom';
 import CanExplorer from './CanExplorer';
 import AcuraDbc from './acura-dbc';
 import {getUrlParameter} from './utils/url';
-
+import {GITHUB_AUTH_TOKEN_KEY} from './config';
+import {fetchPersistedDbc} from './api/localstorage';
 import './index.css';
 
 const routeFullName = getUrlParameter('route');
@@ -23,10 +24,18 @@ if(routeFullName) {
     const [dongleId, route] = routeFullName.split('|');
     props.dongleId = dongleId;
     props.name = route;
+
+    const persistedDbc = fetchPersistedDbc(routeFullName);
+    if(persistedDbc) {
+      const {dbcFilename, dbc} = persistedDbc;
+      props.dbc = dbc;
+      props.dbcFilename = dbcFilename;
+    }
 } else {
     props.dongleId = '3a874b7845c28583';
     props.name = '2017-06-09--18-23-30';
 }
+
 ReactDOM.render(
   <CanExplorer
      {...props} />,

src/utils/url.js

@@ -7,5 +7,6 @@ export function getUrlParameter(name) {
     name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
     var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
     var results = regex.exec(location.search);
-    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+
+    return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }