2017-12-12 19:24:01 -07:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import Moment from "moment";
|
|
|
|
import PropTypes from "prop-types";
|
2018-03-18 18:46:30 -06:00
|
|
|
import cx from "classnames";
|
|
|
|
import { createWriteStream } from "streamsaver";
|
|
|
|
import Panda from "@commaai/pandajs";
|
2019-06-14 15:39:49 -06:00
|
|
|
import CommaAuth from "@commaai/my-comma-auth";
|
|
|
|
import { raw as RawDataApi, drives as DrivesApi } from "@commaai/comma-api";
|
2019-09-16 11:38:41 -06:00
|
|
|
import {
|
|
|
|
USE_UNLOGGER,
|
|
|
|
PART_SEGMENT_LENGTH,
|
|
|
|
STREAMING_WINDOW,
|
|
|
|
GITHUB_AUTH_TOKEN_KEY
|
|
|
|
} from "./config";
|
2017-12-12 19:24:01 -07:00
|
|
|
import * as GithubAuth from "./api/github-auth";
|
|
|
|
|
|
|
|
import DBC from "./models/can/dbc";
|
|
|
|
import Meta from "./components/Meta";
|
|
|
|
import Explorer from "./components/Explorer";
|
|
|
|
import OnboardingModal from "./components/Modals/OnboardingModal";
|
|
|
|
import SaveDbcModal from "./components/SaveDbcModal";
|
|
|
|
import LoadDbcModal from "./components/LoadDbcModal";
|
|
|
|
import debounce from "./utils/debounce";
|
|
|
|
import EditMessageModal from "./components/EditMessageModal";
|
|
|
|
import LoadingBar from "./components/LoadingBar";
|
|
|
|
import {
|
|
|
|
persistDbc,
|
|
|
|
fetchPersistedDbc,
|
|
|
|
unpersistGithubAuthToken
|
|
|
|
} from "./api/localstorage";
|
|
|
|
import OpenDbc from "./api/OpenDbc";
|
|
|
|
import UnloggerClient from "./api/unlogger";
|
|
|
|
import * as ObjectUtils from "./utils/object";
|
|
|
|
import { hash } from "./utils/string";
|
2019-09-16 11:38:41 -06:00
|
|
|
import { modifyQueryParameters } from "./utils/url";
|
2017-12-12 19:24:01 -07:00
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
const RLogDownloader = require("./workers/rlog-downloader.worker.js");
|
2017-12-12 19:24:01 -07:00
|
|
|
const LogCSVDownloader = require("./workers/dbc-csv-downloader.worker.js");
|
2017-06-13 18:40:05 -06:00
|
|
|
const MessageParser = require("./workers/message-parser.worker.js");
|
2019-09-02 17:39:56 -06:00
|
|
|
const CanOffsetFinder = require("./workers/can-offset-finder.worker.js");
|
2017-12-12 19:24:01 -07:00
|
|
|
const CanStreamerWorker = require("./workers/CanStreamerWorker.worker.js");
|
2017-06-28 19:03:21 -06:00
|
|
|
|
2018-09-03 15:13:25 -06:00
|
|
|
export default class CanExplorer extends Component {
|
2017-12-12 19:24:01 -07:00
|
|
|
static propTypes = {
|
|
|
|
dongleId: PropTypes.string,
|
|
|
|
name: PropTypes.string,
|
|
|
|
dbc: PropTypes.instanceOf(DBC),
|
|
|
|
dbcFilename: PropTypes.string,
|
|
|
|
githubAuthToken: PropTypes.string,
|
|
|
|
autoplay: PropTypes.bool,
|
|
|
|
max: PropTypes.number,
|
2018-09-03 15:13:25 -06:00
|
|
|
url: PropTypes.string
|
2017-12-12 19:24:01 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
messages: {},
|
|
|
|
selectedMessages: [],
|
2018-09-03 15:13:25 -06:00
|
|
|
route: null,
|
2019-08-28 12:25:35 -06:00
|
|
|
canFrameOffset: 0,
|
2019-02-13 15:27:27 -07:00
|
|
|
firstCanTime: null,
|
2017-12-12 19:24:01 -07:00
|
|
|
lastBusTime: null,
|
|
|
|
selectedMessage: null,
|
2018-09-03 15:13:25 -06:00
|
|
|
currentParts: [0, 0],
|
2019-09-09 14:26:43 -06:00
|
|
|
currentPart: 0,
|
|
|
|
currentWorkers: {},
|
|
|
|
loadingParts: [],
|
|
|
|
loadedParts: [],
|
2017-12-12 19:24:01 -07:00
|
|
|
showOnboarding: false,
|
|
|
|
showLoadDbc: false,
|
|
|
|
showSaveDbc: false,
|
|
|
|
showEditMessageModal: false,
|
|
|
|
editMessageModalMessage: null,
|
|
|
|
dbc: props.dbc ? props.dbc : new DBC(),
|
|
|
|
dbcText: props.dbc ? props.dbc.text() : new DBC().text(),
|
|
|
|
dbcFilename: props.dbcFilename ? props.dbcFilename : "New_DBC",
|
|
|
|
dbcLastSaved: null,
|
2018-09-03 15:13:25 -06:00
|
|
|
seekTime: 0,
|
2017-12-12 19:24:01 -07:00
|
|
|
seekIndex: 0,
|
|
|
|
maxByteStateChangeCount: 0,
|
|
|
|
isLoading: true,
|
|
|
|
partsLoaded: 0,
|
|
|
|
spawnWorkerHash: null,
|
|
|
|
attemptingPandaConnection: false,
|
|
|
|
pandaNoDeviceSelected: false,
|
|
|
|
live: false,
|
|
|
|
isGithubAuthenticated:
|
2019-09-16 11:38:41 -06:00
|
|
|
props.githubAuthToken !== null && props.githubAuthToken !== undefined,
|
|
|
|
shareUrl: null,
|
|
|
|
logUrls: null
|
2017-05-29 17:52:17 -06:00
|
|
|
};
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
this.openDbcClient = new OpenDbc(props.githubAuthToken);
|
|
|
|
if (USE_UNLOGGER) {
|
|
|
|
this.unloggerClient = new UnloggerClient();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.showOnboarding = this.showOnboarding.bind(this);
|
|
|
|
this.hideOnboarding = this.hideOnboarding.bind(this);
|
|
|
|
this.showLoadDbc = this.showLoadDbc.bind(this);
|
|
|
|
this.hideLoadDbc = this.hideLoadDbc.bind(this);
|
|
|
|
this.showSaveDbc = this.showSaveDbc.bind(this);
|
|
|
|
this.hideSaveDbc = this.hideSaveDbc.bind(this);
|
|
|
|
this.showEditMessageModal = this.showEditMessageModal.bind(this);
|
|
|
|
this.hideEditMessageModal = this.hideEditMessageModal.bind(this);
|
|
|
|
this.onDbcSelected = this.onDbcSelected.bind(this);
|
|
|
|
this.onDbcSaved = this.onDbcSaved.bind(this);
|
|
|
|
this.onConfirmedSignalChange = this.onConfirmedSignalChange.bind(this);
|
|
|
|
this.onPartChange = this.onPartChange.bind(this);
|
|
|
|
this.onMessageFrameEdited = this.onMessageFrameEdited.bind(this);
|
|
|
|
this.onSeek = this.onSeek.bind(this);
|
|
|
|
this.onUserSeek = this.onUserSeek.bind(this);
|
|
|
|
this.onMessageSelected = this.onMessageSelected.bind(this);
|
|
|
|
this.onMessageUnselected = this.onMessageUnselected.bind(this);
|
|
|
|
this.initCanData = this.initCanData.bind(this);
|
|
|
|
this.updateSelectedMessages = this.updateSelectedMessages.bind(this);
|
|
|
|
this.handlePandaConnect = this.handlePandaConnect.bind(this);
|
|
|
|
this.processStreamedCanMessages = this.processStreamedCanMessages.bind(
|
|
|
|
this
|
|
|
|
);
|
|
|
|
this.onStreamedCanMessagesProcessed = this.onStreamedCanMessagesProcessed.bind(
|
|
|
|
this
|
|
|
|
);
|
|
|
|
this.showingModal = this.showingModal.bind(this);
|
|
|
|
this.lastMessageEntriesById = this.lastMessageEntriesById.bind(this);
|
|
|
|
this.githubSignOut = this.githubSignOut.bind(this);
|
2018-03-17 17:54:07 -06:00
|
|
|
this.downloadLogAsCSV = this.downloadLogAsCSV.bind(this);
|
2018-03-18 18:46:30 -06:00
|
|
|
|
|
|
|
this.pandaReader = new Panda();
|
|
|
|
this.pandaReader.onMessage(this.processStreamedCanMessages);
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
const { dongleId, name } = this.props;
|
2019-06-14 15:39:49 -06:00
|
|
|
if (CommaAuth.isAuthenticated() && !name) {
|
|
|
|
this.showOnboarding();
|
2019-09-16 11:38:41 -06:00
|
|
|
} else if (
|
|
|
|
this.props.max &&
|
|
|
|
this.props.url &&
|
|
|
|
!this.props.exp &&
|
|
|
|
!this.props.sig
|
|
|
|
) {
|
2018-05-09 12:06:52 -06:00
|
|
|
// probably the demo!
|
2017-12-12 19:24:01 -07:00
|
|
|
const { max, url } = this.props;
|
2019-06-14 15:39:49 -06:00
|
|
|
const startTime = Moment(name, "YYYY-MM-DD--H-m-s");
|
2017-12-12 19:24:01 -07:00
|
|
|
|
|
|
|
const route = {
|
2018-05-10 11:24:31 -06:00
|
|
|
fullname: dongleId + "|" + name,
|
2017-12-12 19:24:01 -07:00
|
|
|
proclog: max,
|
|
|
|
url: url,
|
|
|
|
start_time: startTime
|
|
|
|
};
|
2018-09-03 15:13:25 -06:00
|
|
|
this.setState(
|
|
|
|
{
|
|
|
|
route,
|
|
|
|
currentParts: [0, Math.min(max, PART_SEGMENT_LENGTH - 1)]
|
|
|
|
},
|
|
|
|
this.initCanData
|
|
|
|
);
|
2017-12-12 19:24:01 -07:00
|
|
|
} else if (dongleId && name) {
|
2019-06-14 15:39:49 -06:00
|
|
|
const routeName = dongleId + "|" + name;
|
2019-09-16 11:38:41 -06:00
|
|
|
let urlPromise, logUrlsPromise;
|
|
|
|
|
2019-06-14 15:39:49 -06:00
|
|
|
if (this.props.url) {
|
|
|
|
urlPromise = Promise.resolve(this.props.url);
|
|
|
|
} else {
|
|
|
|
urlPromise = DrivesApi.getRouteInfo(routeName).then(function(route) {
|
|
|
|
return route.url;
|
|
|
|
});
|
|
|
|
}
|
2019-09-16 11:38:41 -06:00
|
|
|
|
|
|
|
if (this.props.sig && this.props.exp) {
|
|
|
|
logUrlsPromise = RawDataApi.getLogUrls(routeName, {
|
|
|
|
sig: this.props.sig,
|
|
|
|
exp: this.props.exp
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
logUrlsPromise = RawDataApi.getLogUrls(routeName);
|
|
|
|
}
|
|
|
|
Promise.all([urlPromise, logUrlsPromise])
|
2019-06-14 15:39:49 -06:00
|
|
|
.then(initData => {
|
|
|
|
let [url, logUrls] = initData;
|
|
|
|
const newState = {
|
|
|
|
route: {
|
|
|
|
fullname: routeName,
|
|
|
|
proclog: logUrls.length - 1,
|
|
|
|
start_time: Moment(name, "YYYY-MM-DD--H-m-s"),
|
|
|
|
url
|
|
|
|
},
|
|
|
|
currentParts: [
|
|
|
|
0,
|
|
|
|
Math.min(logUrls.length - 1, PART_SEGMENT_LENGTH - 1)
|
2019-09-16 11:38:41 -06:00
|
|
|
],
|
|
|
|
logUrls
|
2019-06-14 15:39:49 -06:00
|
|
|
};
|
|
|
|
this.setState(newState, this.initCanData);
|
2019-09-16 11:38:41 -06:00
|
|
|
|
|
|
|
DrivesApi.getShareSignature(routeName).then(shareSignature =>
|
|
|
|
this.setState({
|
|
|
|
shareUrl: modifyQueryParameters({
|
|
|
|
add: {
|
|
|
|
exp: shareSignature.exp,
|
|
|
|
sig: shareSignature.sig,
|
|
|
|
max: logUrls.length - 1,
|
|
|
|
url
|
|
|
|
},
|
|
|
|
remove: [GITHUB_AUTH_TOKEN_KEY]
|
|
|
|
})
|
|
|
|
})
|
|
|
|
);
|
2017-12-12 19:24:01 -07:00
|
|
|
})
|
|
|
|
.catch(err => {
|
2019-06-14 15:39:49 -06:00
|
|
|
console.error(err);
|
2017-11-06 18:52:43 -07:00
|
|
|
this.showOnboarding();
|
2017-08-03 15:41:52 -06:00
|
|
|
});
|
2017-12-12 19:24:01 -07:00
|
|
|
} else {
|
|
|
|
this.showOnboarding();
|
2017-05-29 17:52:17 -06:00
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2017-05-29 17:52:17 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
initCanData() {
|
2018-09-03 15:13:25 -06:00
|
|
|
const { route } = this.state;
|
2017-06-28 19:03:21 -06:00
|
|
|
|
2019-09-02 17:39:56 -06:00
|
|
|
const offsetFinder = new CanOffsetFinder();
|
|
|
|
offsetFinder.postMessage({
|
|
|
|
partCount: route.proclog,
|
|
|
|
base: route.url
|
|
|
|
});
|
|
|
|
|
|
|
|
offsetFinder.onmessage = e => {
|
|
|
|
if ("error" in e.data) {
|
2019-09-09 14:26:43 -06:00
|
|
|
this.spawnWorker();
|
2019-09-02 17:39:56 -06:00
|
|
|
} else {
|
|
|
|
const { canFrameOffset, firstCanTime } = e.data;
|
|
|
|
|
|
|
|
this.setState({ canFrameOffset, firstCanTime }, () => {
|
2019-09-09 14:26:43 -06:00
|
|
|
this.spawnWorker();
|
2019-09-02 17:39:56 -06:00
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
onDbcSelected(dbcFilename, dbc) {
|
2018-09-03 15:13:25 -06:00
|
|
|
const { route } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
this.hideLoadDbc();
|
|
|
|
this.persistDbc({ dbcFilename, dbc });
|
|
|
|
|
|
|
|
if (route) {
|
|
|
|
this.setState(
|
|
|
|
{
|
|
|
|
dbc,
|
|
|
|
dbcFilename,
|
|
|
|
dbcText: dbc.text(),
|
|
|
|
partsLoaded: 0,
|
|
|
|
selectedMessage: null,
|
|
|
|
messages: {}
|
|
|
|
},
|
|
|
|
() => {
|
2017-08-03 15:41:52 -06:00
|
|
|
// Pass DBC text to webworker b/c can't pass instance of es6 class
|
2019-09-09 14:26:43 -06:00
|
|
|
this.spawnWorker();
|
2017-12-06 14:27:50 -07:00
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.setState({ dbc, dbcFilename, dbcText: dbc.text(), messages: {} });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onDbcSaved(dbcFilename) {
|
|
|
|
const dbcLastSaved = Moment();
|
|
|
|
this.setState({ dbcLastSaved, dbcFilename });
|
|
|
|
this.hideSaveDbc();
|
|
|
|
}
|
|
|
|
|
|
|
|
// async downloadDbcFile() {
|
|
|
|
// const blob = new Blob([this.props.dbc.text()], {type: "text/plain;charset=utf-8"});
|
|
|
|
// const filename = this.state.dbcFilename.replace(/\.dbc/g, '') + '.dbc';
|
|
|
|
// FileSaver.saveAs(blob, filename, true);
|
|
|
|
// }
|
|
|
|
|
2018-03-17 17:54:07 -06:00
|
|
|
downloadLogAsCSV() {
|
|
|
|
console.log("downloadLogAsCSV:start");
|
|
|
|
const { dbcFilename } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
const fileStream = createWriteStream(
|
|
|
|
`${dbcFilename.replace(/\.dbc/g, "-")}${+new Date()}.csv`
|
|
|
|
);
|
|
|
|
const writer = fileStream.getWriter();
|
|
|
|
const encoder = new TextEncoder();
|
|
|
|
|
2018-03-17 17:54:07 -06:00
|
|
|
if (this.state.live) {
|
|
|
|
return this.downloadLiveLogAsCSV(dataHandler);
|
|
|
|
}
|
|
|
|
return this.downloadRawLogAsCSV(dataHandler);
|
|
|
|
|
|
|
|
function dataHandler(e) {
|
|
|
|
const { logData, shouldClose, progress } = e.data;
|
2017-12-12 19:24:01 -07:00
|
|
|
if (shouldClose) {
|
2018-03-17 17:54:07 -06:00
|
|
|
console.log("downloadLogAsCSV:close");
|
2017-12-12 19:24:01 -07:00
|
|
|
writer.close();
|
|
|
|
return;
|
2017-12-06 14:27:50 -07:00
|
|
|
}
|
2018-03-17 17:54:07 -06:00
|
|
|
console.log("CSV export progress:", progress);
|
2017-12-12 19:24:01 -07:00
|
|
|
const uint8array = encoder.encode(logData + "\n");
|
|
|
|
writer.write(uint8array);
|
2018-03-17 17:54:07 -06:00
|
|
|
}
|
|
|
|
}
|
|
|
|
downloadRawLogAsCSV(handler) {
|
|
|
|
// Trigger file processing and dowload in worker
|
2018-09-03 15:13:25 -06:00
|
|
|
const { firstCanTime, canFrameOffset, route } = this.state;
|
2018-03-17 17:54:07 -06:00
|
|
|
const worker = new LogCSVDownloader();
|
|
|
|
|
|
|
|
worker.onmessage = handler;
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
worker.postMessage({
|
|
|
|
base: route.url,
|
|
|
|
parts: [0, route.proclog],
|
|
|
|
canStartTime: firstCanTime - canFrameOffset
|
|
|
|
});
|
2018-03-17 17:54:07 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
downloadLiveLogAsCSV(handler) {
|
|
|
|
// Trigger processing of in-memory data in worker
|
|
|
|
// this method *could* just fetch the data needed for the worked, but
|
|
|
|
// eventually this might be in it's own worker instead of the shared one
|
|
|
|
const { firstCanTime, canFrameOffset } = this.state;
|
|
|
|
const worker = new LogCSVDownloader();
|
|
|
|
|
|
|
|
worker.onmessage = handler;
|
|
|
|
|
|
|
|
worker.postMessage({
|
|
|
|
data: Object.keys(this.state.messages).map(sourceId => {
|
|
|
|
var source = this.state.messages[sourceId];
|
|
|
|
return {
|
|
|
|
id: source.id,
|
|
|
|
bus: source.bus,
|
|
|
|
address: source.address,
|
|
|
|
entries: source.entries.slice()
|
|
|
|
};
|
|
|
|
}),
|
|
|
|
canStartTime: firstCanTime - canFrameOffset
|
|
|
|
});
|
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
|
|
|
|
addAndRehydrateMessages(newMessages, options) {
|
|
|
|
// Adds new message entries to messages state
|
|
|
|
// and "rehydrates" ES6 classes (message frame)
|
|
|
|
// lost from JSON serialization in webworker data cloning.
|
2018-05-03 12:23:45 -06:00
|
|
|
options = options || {};
|
2017-12-12 19:24:01 -07:00
|
|
|
|
|
|
|
const messages = { ...this.state.messages };
|
|
|
|
for (var key in newMessages) {
|
|
|
|
// add message
|
|
|
|
if (options.replace !== true && key in messages) {
|
2019-09-09 14:26:43 -06:00
|
|
|
// should merge here instead of concat
|
|
|
|
// assumes messages are always sequential
|
|
|
|
let msgEntries = messages[key].entries;
|
|
|
|
let newMsgEntries = newMessages[key].entries;
|
|
|
|
let msgLength = msgEntries.length;
|
|
|
|
let newMsgLength = newMsgEntries.length;
|
|
|
|
let entryLength = msgLength + newMsgLength;
|
|
|
|
messages[key].entries = Array(entryLength);
|
|
|
|
|
|
|
|
let msgIndex = 0;
|
|
|
|
let newMsgIndex = 0;
|
|
|
|
|
|
|
|
for (let i = 0; i < entryLength; ++i) {
|
|
|
|
if (newMsgIndex >= newMsgLength) {
|
|
|
|
messages[key].entries[i] = msgEntries[msgIndex++];
|
|
|
|
} else if (msgIndex >= msgLength) {
|
|
|
|
messages[key].entries[i] = newMsgEntries[newMsgIndex++];
|
|
|
|
} else if (
|
|
|
|
msgEntries[msgIndex].relTime <= newMsgEntries[newMsgIndex].relTime
|
|
|
|
) {
|
|
|
|
messages[key].entries[i] = msgEntries[msgIndex++];
|
|
|
|
} else if (
|
|
|
|
msgEntries[msgIndex].relTime >= newMsgEntries[newMsgIndex].relTime
|
|
|
|
) {
|
|
|
|
messages[key].entries[i] = newMsgEntries[newMsgIndex++];
|
|
|
|
}
|
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
messages[key].byteStateChangeCounts =
|
|
|
|
newMessages[key].byteStateChangeCounts;
|
|
|
|
} else {
|
|
|
|
messages[key] = newMessages[key];
|
2018-07-24 16:15:09 -06:00
|
|
|
messages[key].frame = this.state.dbc.getMessageFrame(
|
2017-12-12 19:24:01 -07:00
|
|
|
messages[key].address
|
|
|
|
);
|
2017-08-03 15:41:52 -06:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
return messages;
|
|
|
|
}
|
|
|
|
|
2019-09-09 14:26:43 -06:00
|
|
|
cancelWorker(workerHash) {
|
|
|
|
let currentWorkers = { ...this.state.currentWorkers };
|
|
|
|
let { worker, part } = currentWorkers[workerHash];
|
|
|
|
let loadingParts = this.state.loadingParts.filter(p => p !== part);
|
|
|
|
let loadedParts = this.state.loadedParts.filter(p => p !== part);
|
|
|
|
delete currentWorkers[workerHash];
|
|
|
|
|
|
|
|
console.log("Stoping worker", workerHash, "for part", part);
|
|
|
|
worker.terminate();
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
currentWorkers,
|
|
|
|
loadingParts,
|
|
|
|
loadedParts
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
spawnWorker(options) {
|
|
|
|
let { currentParts, currentWorkers } = this.state;
|
|
|
|
console.log("Checking worker for", currentParts);
|
2018-09-03 15:13:25 -06:00
|
|
|
if (!this.state.isLoading) {
|
|
|
|
this.setState({ isLoading: true });
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2019-09-09 14:26:43 -06:00
|
|
|
const [minPart, maxPart] = currentParts;
|
|
|
|
// cancel old workers that are still loading data no longer inside the window
|
|
|
|
Object.keys(currentWorkers).forEach(workerHash => {
|
|
|
|
if (
|
|
|
|
currentWorkers[workerHash].part < minPart ||
|
|
|
|
currentWorkers[workerHash].part > maxPart
|
|
|
|
) {
|
|
|
|
this.cancelWorker(workerHash);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// updated worker list (post canceling, and this time a copy)
|
|
|
|
currentWorkers = { ...this.state.currentWorkers };
|
2018-05-03 12:23:45 -06:00
|
|
|
|
2019-09-09 14:26:43 -06:00
|
|
|
let { loadingParts, loadedParts, currentPart } = this.state;
|
|
|
|
|
|
|
|
// clean this up just in case, the cancel process above *should* have already done this
|
|
|
|
// they have at most 4 entries so it's trivial
|
|
|
|
loadingParts = loadingParts.filter(p => p >= minPart && p <= maxPart);
|
|
|
|
loadedParts = loadedParts.filter(p => p >= minPart && p <= maxPart);
|
|
|
|
|
|
|
|
let part = -1;
|
|
|
|
let allWorkerParts = Object.keys(currentWorkers).map(
|
|
|
|
i => currentWorkers[i].part
|
|
|
|
);
|
2017-08-03 15:41:52 -06:00
|
|
|
|
2019-09-09 14:26:43 -06:00
|
|
|
for (let partOffset = 0; partOffset <= maxPart - minPart; ++partOffset) {
|
|
|
|
let tempPart = currentPart + partOffset;
|
|
|
|
if (tempPart > maxPart) {
|
|
|
|
tempPart = minPart + (tempPart - minPart) % (maxPart - minPart + 1);
|
|
|
|
}
|
|
|
|
if (allWorkerParts.indexOf(tempPart) === -1) {
|
|
|
|
part = tempPart;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (part === -1) {
|
|
|
|
console.log("Loading complete");
|
|
|
|
this.setState({ isLoading: false });
|
|
|
|
return;
|
2017-08-03 15:41:52 -06:00
|
|
|
}
|
2019-09-09 14:26:43 -06:00
|
|
|
console.log("Starting worker for part", part);
|
|
|
|
// options is object of {part, prevMsgEntries, spawnWorkerHash, prepend}
|
|
|
|
options = options || {};
|
|
|
|
let prevMsgEntries = options.prevMsgEntries;
|
|
|
|
let prepend = false;
|
2017-08-03 15:41:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
const {
|
|
|
|
dbc,
|
|
|
|
dbcFilename,
|
2018-09-03 15:13:25 -06:00
|
|
|
route,
|
2017-12-12 19:24:01 -07:00
|
|
|
firstCanTime,
|
|
|
|
canFrameOffset,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
} = this.state;
|
2019-09-09 14:26:43 -06:00
|
|
|
|
|
|
|
if (!prevMsgEntries) {
|
|
|
|
// we have previous messages loaded
|
|
|
|
let { messages } = this.state;
|
|
|
|
let canStartTime = firstCanTime - canFrameOffset;
|
|
|
|
prevMsgEntries = {};
|
|
|
|
Object.keys(messages).forEach(function(key) {
|
|
|
|
let entries = messages[key].entries;
|
|
|
|
prevMsgEntries[key] = entries[entries.length - 1];
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
// var worker = new CanFetcher();
|
|
|
|
var worker = new RLogDownloader();
|
2017-06-13 18:40:05 -06:00
|
|
|
|
2019-09-09 14:26:43 -06:00
|
|
|
let spawnWorkerHash = hash(Math.random().toString(16));
|
|
|
|
currentWorkers[spawnWorkerHash] = {
|
|
|
|
part,
|
|
|
|
worker
|
|
|
|
};
|
|
|
|
|
|
|
|
loadingParts = [part, ...loadingParts];
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
currentWorkers,
|
|
|
|
loadingParts
|
|
|
|
});
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
worker.onmessage = e => {
|
2019-09-09 14:26:43 -06:00
|
|
|
if (this.state.currentWorkers[spawnWorkerHash] === undefined) {
|
|
|
|
console.log("Worker was canceled");
|
2017-12-12 19:24:01 -07:00
|
|
|
return;
|
2017-06-13 18:40:05 -06:00
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
if (this.state.dbcFilename !== dbcFilename) {
|
|
|
|
// DBC changed while this worker was running
|
|
|
|
// -- don't update messages and halt recursion.
|
|
|
|
return;
|
|
|
|
}
|
2017-08-03 17:56:59 -06:00
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
let { newMessages, maxByteStateChangeCount, isFinished } = e.data;
|
2017-12-12 19:24:01 -07:00
|
|
|
if (maxByteStateChangeCount > this.state.maxByteStateChangeCount) {
|
|
|
|
this.setState({ maxByteStateChangeCount });
|
2017-08-21 19:24:51 -06:00
|
|
|
} else {
|
2017-12-12 19:24:01 -07:00
|
|
|
maxByteStateChangeCount = this.state.maxByteStateChangeCount;
|
2017-08-21 19:24:51 -06:00
|
|
|
}
|
2017-08-03 15:41:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
const messages = this.addAndRehydrateMessages(
|
|
|
|
newMessages,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
);
|
|
|
|
const prevMsgEntries = {};
|
|
|
|
for (let key in newMessages) {
|
2019-09-09 14:26:43 -06:00
|
|
|
prevMsgEntries[key] =
|
|
|
|
newMessages[key].entries[newMessages[key].entries.length - 1];
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2017-08-03 15:41:52 -06:00
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
if (!isFinished) {
|
|
|
|
this.setState({ messages });
|
|
|
|
} else {
|
2019-09-09 14:26:43 -06:00
|
|
|
let loadingParts = this.state.loadingParts.filter(p => p !== part);
|
|
|
|
let loadedParts = [part, ...this.state.loadedParts];
|
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
this.setState(
|
|
|
|
{
|
|
|
|
messages,
|
2019-09-09 14:26:43 -06:00
|
|
|
partsLoaded: this.state.partsLoaded + 1,
|
|
|
|
loadingParts,
|
|
|
|
loadedParts
|
2018-05-03 12:23:45 -06:00
|
|
|
},
|
|
|
|
() => {
|
2019-09-09 14:26:43 -06:00
|
|
|
this.spawnWorker({
|
|
|
|
prevMsgEntries,
|
|
|
|
spawnWorkerHash,
|
|
|
|
prepend
|
|
|
|
});
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2018-05-03 12:23:45 -06:00
|
|
|
);
|
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
};
|
2017-07-07 16:06:47 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
worker.postMessage({
|
2018-05-03 12:23:45 -06:00
|
|
|
// old stuff for reverse compatibility for easier testing
|
2017-12-12 19:24:01 -07:00
|
|
|
base: route.url,
|
|
|
|
num: part,
|
2018-05-03 12:23:45 -06:00
|
|
|
|
2018-05-09 12:06:52 -06:00
|
|
|
// so that we don't try to read metadata about it...
|
|
|
|
isDemo: this.props.isDemo,
|
2019-09-16 11:38:41 -06:00
|
|
|
isLegacyShare: this.props.isLegacyShare,
|
|
|
|
logUrls: this.state.logUrls,
|
2018-05-09 12:06:52 -06:00
|
|
|
|
2018-05-03 12:23:45 -06:00
|
|
|
// data that is used
|
|
|
|
dbcText: dbc.text(),
|
|
|
|
route: route.fullname,
|
|
|
|
part: part,
|
2019-02-13 15:27:27 -07:00
|
|
|
canStartTime: firstCanTime != null ? firstCanTime - canFrameOffset : null,
|
2017-12-12 19:24:01 -07:00
|
|
|
prevMsgEntries,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
showingModal() {
|
|
|
|
const {
|
|
|
|
showOnboarding,
|
|
|
|
showLoadDbc,
|
|
|
|
showSaveDbc,
|
|
|
|
showAddSignal,
|
|
|
|
showEditMessageModal
|
|
|
|
} = this.state;
|
|
|
|
return (
|
|
|
|
showOnboarding ||
|
|
|
|
showLoadDbc ||
|
|
|
|
showSaveDbc ||
|
|
|
|
showAddSignal ||
|
|
|
|
showEditMessageModal
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
showOnboarding() {
|
|
|
|
this.setState({ showOnboarding: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
hideOnboarding() {
|
|
|
|
this.setState({ showOnboarding: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
showLoadDbc() {
|
|
|
|
this.setState({ showLoadDbc: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
hideLoadDbc() {
|
|
|
|
this.setState({ showLoadDbc: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
showSaveDbc() {
|
|
|
|
this.setState({ showSaveDbc: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
hideSaveDbc() {
|
|
|
|
this.setState({ showSaveDbc: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
reparseMessages(messages) {
|
|
|
|
this.setState({ isLoading: true });
|
|
|
|
|
|
|
|
const { dbc } = this.state;
|
|
|
|
var worker = new MessageParser();
|
|
|
|
worker.onmessage = e => {
|
|
|
|
let messages = e.data;
|
|
|
|
messages = this.addAndRehydrateMessages(messages, { replace: true });
|
|
|
|
|
|
|
|
this.setState({ messages, isLoading: false });
|
|
|
|
};
|
2017-07-07 16:06:47 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
worker.postMessage({
|
|
|
|
messages,
|
|
|
|
dbcText: dbc.text(),
|
|
|
|
canStartTime: this.state.firstCanTime
|
|
|
|
});
|
|
|
|
}
|
2017-07-20 20:24:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
updateMessageFrame(messageId, frame) {
|
|
|
|
const { messages } = this.state;
|
2017-07-20 20:24:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
messages[messageId].frame = frame;
|
|
|
|
this.setState({ messages });
|
|
|
|
}
|
2017-07-20 19:42:08 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
persistDbc({ dbcFilename, dbc }) {
|
2018-09-03 15:13:25 -06:00
|
|
|
const { route } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
if (route) {
|
|
|
|
persistDbc(route.fullname, { dbcFilename, dbc });
|
|
|
|
} else {
|
|
|
|
persistDbc("live", { dbcFilename, dbc });
|
2017-07-05 08:56:24 -06:00
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2017-06-15 00:22:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
onConfirmedSignalChange(message, signals) {
|
2017-12-15 15:29:13 -07:00
|
|
|
const { dbc, dbcFilename } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
dbc.setSignals(message.address, { ...signals });
|
2017-06-20 17:46:07 -06:00
|
|
|
|
2018-07-24 16:15:09 -06:00
|
|
|
this.updateMessageFrame(message.id, dbc.getMessageFrame(message.address));
|
2017-06-30 21:12:47 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
this.persistDbc({ dbcFilename, dbc });
|
2017-06-19 21:40:07 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
const messages = {};
|
|
|
|
const newMessage = { ...message };
|
2018-07-24 16:15:09 -06:00
|
|
|
const frame = dbc.getMessageFrame(message.address);
|
2017-12-12 19:24:01 -07:00
|
|
|
newMessage.frame = frame;
|
2017-06-19 21:40:07 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
messages[message.id] = newMessage;
|
2017-06-28 19:03:21 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
this.setState({ dbc, dbcText: dbc.text() }, () =>
|
|
|
|
this.reparseMessages(messages)
|
|
|
|
);
|
|
|
|
}
|
2017-08-21 19:24:51 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
partChangeDebounced = debounce(() => {
|
2019-09-09 14:26:43 -06:00
|
|
|
let [minPart, maxPart] = this.state.currentParts;
|
|
|
|
let messages = { ...this.state.messages };
|
|
|
|
// update messages to only preserve entries in new part range
|
|
|
|
let minTime = minPart * 60;
|
|
|
|
let maxTime = maxPart * 60 + 60;
|
|
|
|
Object.keys(messages).forEach(key => {
|
|
|
|
let entries = messages[key].entries;
|
|
|
|
let minIndex = 0;
|
|
|
|
let maxIndex = entries.length - 1;
|
|
|
|
while (minIndex < entries.length && entries[minIndex].relTime < minTime) {
|
|
|
|
minIndex++;
|
|
|
|
}
|
|
|
|
while (maxIndex > minIndex && entries[maxIndex].relTime > maxTime) {
|
|
|
|
maxIndex--;
|
|
|
|
}
|
|
|
|
if (minIndex > 0 || maxIndex < entries.length - 1) {
|
|
|
|
messages[key].entries = entries.slice(minIndex, maxIndex + 1);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
messages
|
|
|
|
});
|
|
|
|
|
|
|
|
this.spawnWorker();
|
2017-12-12 19:24:01 -07:00
|
|
|
}, 500);
|
2017-06-20 17:46:07 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
onPartChange(part) {
|
2019-09-09 14:26:43 -06:00
|
|
|
let { currentParts, currentPart, canFrameOffset, route } = this.state;
|
|
|
|
if (canFrameOffset === -1 || part === currentPart) {
|
2017-12-12 19:24:01 -07:00
|
|
|
return;
|
2017-06-19 21:40:07 -06:00
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
// determine new parts to load, whether to prepend or append
|
2019-09-09 14:26:43 -06:00
|
|
|
let maxPart = Math.min(route.proclog, part + 1);
|
|
|
|
let minPart = Math.max(0, maxPart - PART_SEGMENT_LENGTH + 1);
|
|
|
|
if (minPart === 0) {
|
|
|
|
maxPart = Math.min(route.proclog, 2);
|
|
|
|
}
|
2018-09-03 15:13:25 -06:00
|
|
|
const currentPartSpan = currentParts[1] - currentParts[0] + 1;
|
2017-06-23 15:17:35 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
// update current parts
|
2019-09-09 14:26:43 -06:00
|
|
|
currentParts = [minPart, maxPart];
|
|
|
|
currentPart = part;
|
2017-12-12 19:24:01 -07:00
|
|
|
|
2019-09-11 14:36:15 -06:00
|
|
|
if (
|
|
|
|
currentPart !== this.state.currentPart ||
|
|
|
|
currentParts[0] !== this.state.currentParts[0] ||
|
|
|
|
currentParts[1] !== this.state.currentParts[1]
|
|
|
|
) {
|
|
|
|
// update state then load new parts
|
|
|
|
this.setState({ currentParts, currentPart }, this.partChangeDebounced);
|
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
showEditMessageModal(msgKey) {
|
|
|
|
const msg = this.state.messages[msgKey];
|
|
|
|
if (!msg.frame) {
|
|
|
|
msg.frame = this.state.dbc.createFrame(msg.address);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
showEditMessageModal: true,
|
|
|
|
editMessageModalMessage: msgKey,
|
|
|
|
messages: this.state.messages,
|
|
|
|
dbcText: this.state.dbc.text()
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
hideEditMessageModal() {
|
|
|
|
this.setState({ showEditMessageModal: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
onMessageFrameEdited(messageFrame) {
|
2017-12-15 15:29:13 -07:00
|
|
|
const { messages, dbcFilename, dbc, editMessageModalMessage } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
|
|
|
|
const message = Object.assign({}, messages[editMessageModalMessage]);
|
|
|
|
message.frame = messageFrame;
|
|
|
|
dbc.messages.set(messageFrame.id, messageFrame);
|
|
|
|
this.persistDbc({ dbcFilename, dbc });
|
|
|
|
|
|
|
|
messages[editMessageModalMessage] = message;
|
|
|
|
this.setState({ messages, dbc, dbcText: dbc.text() });
|
|
|
|
this.hideEditMessageModal();
|
|
|
|
}
|
|
|
|
|
|
|
|
onSeek(seekIndex, seekTime) {
|
|
|
|
this.setState({ seekIndex, seekTime });
|
2019-09-09 14:26:43 -06:00
|
|
|
|
|
|
|
let { currentPart } = this.state;
|
|
|
|
let part = ~~(seekTime / 60);
|
|
|
|
if (part !== currentPart) {
|
|
|
|
this.onPartChange(part);
|
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
onUserSeek(seekTime) {
|
|
|
|
if (USE_UNLOGGER) {
|
|
|
|
this.unloggerClient.seek(this.props.dongleId, this.props.name, seekTime);
|
|
|
|
}
|
|
|
|
|
|
|
|
const msg = this.state.messages[this.state.selectedMessage];
|
|
|
|
let seekIndex;
|
|
|
|
if (msg) {
|
|
|
|
seekIndex = msg.entries.findIndex(e => e.relTime >= seekTime);
|
|
|
|
if (seekIndex === -1) {
|
|
|
|
seekIndex = 0;
|
2017-07-04 19:15:58 -06:00
|
|
|
}
|
2017-12-12 19:24:01 -07:00
|
|
|
} else {
|
|
|
|
seekIndex = 0;
|
2017-06-29 18:04:40 -06:00
|
|
|
}
|
|
|
|
|
2019-09-09 14:26:43 -06:00
|
|
|
this.onSeek(seekIndex, seekTime);
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
2017-06-23 17:06:34 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
onMessageSelected(msgKey) {
|
2018-09-03 15:13:25 -06:00
|
|
|
let { seekTime, seekIndex, messages } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
const msg = messages[msgKey];
|
2017-06-23 15:17:35 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
if (seekTime > 0 && msg.entries.length > 0) {
|
|
|
|
seekIndex = msg.entries.findIndex(e => e.relTime >= seekTime);
|
|
|
|
if (seekIndex === -1) {
|
|
|
|
seekIndex = 0;
|
2017-06-23 15:17:35 -06:00
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
seekTime = msg.entries[seekIndex].relTime;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ seekTime, seekIndex, selectedMessage: msgKey });
|
|
|
|
}
|
|
|
|
|
|
|
|
updateSelectedMessages(selectedMessages) {
|
|
|
|
this.setState({ selectedMessages });
|
|
|
|
}
|
|
|
|
|
|
|
|
onMessageUnselected(msgKey) {
|
|
|
|
this.setState({ selectedMessage: null });
|
|
|
|
}
|
|
|
|
|
|
|
|
loginWithGithub() {
|
2018-09-03 15:13:25 -06:00
|
|
|
const { route } = this.state;
|
2017-12-12 19:24:01 -07:00
|
|
|
return (
|
|
|
|
<a
|
|
|
|
href={GithubAuth.authorizeUrl(
|
|
|
|
route && route.fullname ? route.fullname : ""
|
|
|
|
)}
|
|
|
|
className="button button--dark button--inline"
|
|
|
|
>
|
|
|
|
<i className="fa fa-github" />
|
|
|
|
<span> Log in with Github</span>
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
lastMessageEntriesById(obj, [msgId, message]) {
|
|
|
|
obj[msgId] = message.entries[message.entries.length - 1];
|
|
|
|
return obj;
|
|
|
|
}
|
|
|
|
|
|
|
|
processStreamedCanMessages(newCanMessages) {
|
|
|
|
const { dbcText } = this.state;
|
|
|
|
const {
|
|
|
|
firstCanTime,
|
|
|
|
lastBusTime,
|
|
|
|
messages,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
} = this.state;
|
|
|
|
// map msg id to arrays
|
|
|
|
const prevMsgEntries = Object.entries(messages).reduce(
|
|
|
|
this.lastMessageEntriesById,
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
|
|
|
|
const byteStateChangeCountsByMessage = Object.entries(messages).reduce(
|
|
|
|
(obj, [msgId, msg]) => {
|
|
|
|
obj[msgId] = msg.byteStateChangeCounts;
|
2017-08-03 15:41:52 -06:00
|
|
|
return obj;
|
2017-12-12 19:24:01 -07:00
|
|
|
},
|
|
|
|
{}
|
|
|
|
);
|
|
|
|
|
|
|
|
this.canStreamerWorker.postMessage({
|
|
|
|
newCanMessages,
|
|
|
|
prevMsgEntries,
|
|
|
|
firstCanTime,
|
|
|
|
dbcText,
|
|
|
|
lastBusTime,
|
|
|
|
byteStateChangeCountsByMessage,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
firstEntryIndexInsideStreamingWindow(entries) {
|
|
|
|
const lastEntryTime = entries[entries.length - 1].relTime;
|
|
|
|
const windowFloor = lastEntryTime - STREAMING_WINDOW;
|
|
|
|
|
|
|
|
for (let i = 0; i < entries.length; i++) {
|
|
|
|
if (entries[i].relTime > windowFloor) {
|
|
|
|
return i;
|
2017-08-03 15:41:52 -06:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
return 0;
|
|
|
|
}
|
2017-08-03 15:41:52 -06:00
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
enforceStreamingMessageWindow(messages) {
|
|
|
|
let messageIds = Object.keys(messages);
|
|
|
|
for (let i = 0; i < messageIds.length; i++) {
|
|
|
|
const messageId = messageIds[i];
|
|
|
|
const message = messages[messageId];
|
|
|
|
if (message.entries.length < 2) {
|
|
|
|
continue;
|
2017-08-03 15:41:52 -06:00
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
const lastEntryTime = message.entries[message.entries.length - 1].relTime;
|
|
|
|
const entrySpan = lastEntryTime - message.entries[0].relTime;
|
|
|
|
if (entrySpan > STREAMING_WINDOW) {
|
|
|
|
const newEntryFloor = this.firstEntryIndexInsideStreamingWindow(
|
|
|
|
message.entries
|
|
|
|
);
|
|
|
|
message.entries = message.entries.slice(newEntryFloor);
|
|
|
|
messages[messageId] = message;
|
2017-08-03 15:41:52 -06:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-12 19:24:01 -07:00
|
|
|
return messages;
|
|
|
|
}
|
|
|
|
|
|
|
|
_onStreamedCanMessagesProcessed(data) {
|
|
|
|
let {
|
|
|
|
newMessages,
|
|
|
|
seekTime,
|
|
|
|
lastBusTime,
|
|
|
|
firstCanTime,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
} = data;
|
|
|
|
|
|
|
|
if (maxByteStateChangeCount < this.state.maxByteStateChangeCount) {
|
|
|
|
maxByteStateChangeCount = this.state.maxByteStateChangeCount;
|
|
|
|
}
|
|
|
|
|
|
|
|
let messages = this.addAndRehydrateMessages(newMessages);
|
|
|
|
messages = this.enforceStreamingMessageWindow(messages);
|
|
|
|
let { seekIndex, selectedMessages } = this.state;
|
|
|
|
if (
|
|
|
|
selectedMessages.length > 0 &&
|
|
|
|
messages[selectedMessages[0]] !== undefined
|
|
|
|
) {
|
|
|
|
seekIndex = messages[selectedMessages[0]].entries.length - 1;
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
messages,
|
|
|
|
seekTime,
|
|
|
|
seekIndex,
|
|
|
|
lastBusTime,
|
|
|
|
firstCanTime,
|
|
|
|
maxByteStateChangeCount
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onStreamedCanMessagesProcessed(e) {
|
|
|
|
this._onStreamedCanMessagesProcessed(e.data);
|
|
|
|
}
|
|
|
|
|
2018-03-18 18:46:30 -06:00
|
|
|
async handlePandaConnect(e) {
|
2017-12-12 19:24:01 -07:00
|
|
|
this.setState({ attemptingPandaConnection: true, live: true });
|
|
|
|
|
|
|
|
const persistedDbc = fetchPersistedDbc("live");
|
|
|
|
if (persistedDbc) {
|
2018-03-18 18:46:30 -06:00
|
|
|
let { dbc, dbcText } = persistedDbc;
|
2017-12-12 19:24:01 -07:00
|
|
|
this.setState({ dbc, dbcText });
|
|
|
|
}
|
|
|
|
this.canStreamerWorker = new CanStreamerWorker();
|
|
|
|
this.canStreamerWorker.onmessage = this.onStreamedCanMessagesProcessed;
|
2018-03-18 18:46:30 -06:00
|
|
|
|
|
|
|
// if any errors go off during connection, mark as not trying to connect anymore...
|
2018-05-03 13:14:39 -06:00
|
|
|
let unlisten = this.pandaReader.onError(err => {
|
|
|
|
console.error(err.stack || err);
|
|
|
|
this.setState({ attemptingPandaConnection: false });
|
|
|
|
});
|
2018-03-18 18:46:30 -06:00
|
|
|
try {
|
|
|
|
await this.pandaReader.start();
|
|
|
|
this.setState({
|
|
|
|
showOnboarding: false,
|
|
|
|
showLoadDbc: true
|
2017-12-12 19:24:01 -07:00
|
|
|
});
|
2018-03-18 18:46:30 -06:00
|
|
|
} catch (e) {}
|
|
|
|
this.setState({ attemptingPandaConnection: false });
|
|
|
|
unlisten();
|
2017-12-12 19:24:01 -07:00
|
|
|
}
|
|
|
|
|
2018-03-18 18:46:30 -06:00
|
|
|
githubSignOut(e, dataArray) {
|
2017-12-12 19:24:01 -07:00
|
|
|
unpersistGithubAuthToken();
|
|
|
|
this.setState({ isGithubAuthenticated: false });
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2018-09-03 15:13:25 -06:00
|
|
|
<div
|
|
|
|
id="cabana"
|
|
|
|
className={cx({ "is-showing-modal": this.showingModal() })}
|
|
|
|
>
|
|
|
|
{this.state.isLoading ? (
|
|
|
|
<LoadingBar isLoading={this.state.isLoading} />
|
|
|
|
) : null}
|
|
|
|
<div className="cabana-header">
|
|
|
|
<a className="cabana-header-logo" href="">
|
|
|
|
Comma Cabana
|
|
|
|
</a>
|
|
|
|
<div className="cabana-header-account">
|
|
|
|
{this.state.isGithubAuthenticated ? (
|
|
|
|
<div>
|
|
|
|
<p>GitHub Authenticated</p>
|
|
|
|
<p
|
|
|
|
className="cabana-header-account-signout"
|
|
|
|
onClick={this.githubSignOut}
|
|
|
|
>
|
|
|
|
Sign out
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
this.loginWithGithub()
|
|
|
|
)}
|
2017-12-12 19:24:01 -07:00
|
|
|
</div>
|
2018-09-03 15:13:25 -06:00
|
|
|
</div>
|
|
|
|
<div className="cabana-window">
|
|
|
|
<Meta
|
|
|
|
url={this.state.route ? this.state.route.url : null}
|
|
|
|
messages={this.state.messages}
|
|
|
|
selectedMessages={this.state.selectedMessages}
|
|
|
|
updateSelectedMessages={this.updateSelectedMessages}
|
|
|
|
showEditMessageModal={this.showEditMessageModal}
|
|
|
|
currentParts={this.state.currentParts}
|
|
|
|
onMessageSelected={this.onMessageSelected}
|
|
|
|
onMessageUnselected={this.onMessageUnselected}
|
|
|
|
showLoadDbc={this.showLoadDbc}
|
|
|
|
showSaveDbc={this.showSaveDbc}
|
|
|
|
dbcFilename={this.state.dbcFilename}
|
|
|
|
dbcLastSaved={this.state.dbcLastSaved}
|
|
|
|
dongleId={this.props.dongleId}
|
|
|
|
name={this.props.name}
|
|
|
|
route={this.state.route}
|
|
|
|
seekTime={this.state.seekTime}
|
|
|
|
seekIndex={this.state.seekIndex}
|
2019-09-16 11:38:41 -06:00
|
|
|
shareUrl={this.state.shareUrl}
|
2018-09-03 15:13:25 -06:00
|
|
|
maxByteStateChangeCount={this.state.maxByteStateChangeCount}
|
|
|
|
isDemo={this.props.isDemo}
|
|
|
|
live={this.state.live}
|
|
|
|
saveLog={debounce(this.downloadLogAsCSV, 500)}
|
|
|
|
/>
|
|
|
|
{this.state.route || this.state.live ? (
|
|
|
|
<Explorer
|
|
|
|
url={this.state.route ? this.state.route.url : null}
|
|
|
|
live={this.state.live}
|
2017-12-12 19:24:01 -07:00
|
|
|
messages={this.state.messages}
|
2018-09-03 15:13:25 -06:00
|
|
|
selectedMessage={this.state.selectedMessage}
|
|
|
|
onConfirmedSignalChange={this.onConfirmedSignalChange}
|
|
|
|
onSeek={this.onSeek}
|
|
|
|
onUserSeek={this.onUserSeek}
|
|
|
|
canFrameOffset={this.state.canFrameOffset}
|
|
|
|
firstCanTime={this.state.firstCanTime}
|
|
|
|
seekTime={this.state.seekTime}
|
|
|
|
seekIndex={this.state.seekIndex}
|
|
|
|
currentParts={this.state.currentParts}
|
2019-09-09 14:26:43 -06:00
|
|
|
selectedPart={this.state.currentPart}
|
2018-09-03 15:13:25 -06:00
|
|
|
partsLoaded={this.state.partsLoaded}
|
|
|
|
autoplay={this.props.autoplay}
|
2017-12-12 19:24:01 -07:00
|
|
|
showEditMessageModal={this.showEditMessageModal}
|
2018-09-03 15:13:25 -06:00
|
|
|
onPartChange={this.onPartChange}
|
|
|
|
routeStartTime={
|
|
|
|
this.state.route ? this.state.route.start_time : Moment()
|
|
|
|
}
|
|
|
|
partsCount={this.state.route ? this.state.route.proclog : 0}
|
2018-08-15 13:53:21 -06:00
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2018-09-03 15:13:25 -06:00
|
|
|
|
|
|
|
{this.state.showOnboarding ? (
|
|
|
|
<OnboardingModal
|
|
|
|
handlePandaConnect={this.handlePandaConnect}
|
|
|
|
attemptingPandaConnection={this.state.attemptingPandaConnection}
|
|
|
|
routes={this.state.routes}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{this.state.showLoadDbc ? (
|
|
|
|
<LoadDbcModal
|
|
|
|
onDbcSelected={this.onDbcSelected}
|
|
|
|
handleClose={this.hideLoadDbc}
|
|
|
|
openDbcClient={this.openDbcClient}
|
|
|
|
loginWithGithub={this.loginWithGithub()}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{this.state.showSaveDbc ? (
|
|
|
|
<SaveDbcModal
|
|
|
|
dbc={this.state.dbc}
|
|
|
|
sourceDbcFilename={this.state.dbcFilename}
|
|
|
|
onDbcSaved={this.onDbcSaved}
|
|
|
|
handleClose={this.hideSaveDbc}
|
|
|
|
openDbcClient={this.openDbcClient}
|
|
|
|
hasGithubAuth={this.props.githubAuthToken !== null}
|
|
|
|
loginWithGithub={this.loginWithGithub()}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{this.state.showEditMessageModal ? (
|
|
|
|
<EditMessageModal
|
|
|
|
handleClose={this.hideEditMessageModal}
|
|
|
|
handleSave={this.onMessageFrameEdited}
|
|
|
|
message={this.state.messages[this.state.editMessageModalMessage]}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2017-12-12 19:24:01 -07:00
|
|
|
);
|
|
|
|
}
|
2017-05-29 17:52:17 -06:00
|
|
|
}
|