switch back to create-react-app
ChristopherBiscardi
parent
54c5f50c71
commit
40e7efad4c
|
|
@ -0,0 +1,11 @@
|
|||
const path = require("path");
|
||||
|
||||
module.exports = function override(config, env) {
|
||||
config.module.rules.push({
|
||||
test: /worker\.js$/,
|
||||
include: path.resolve("./src"),
|
||||
use: [{ loader: "worker-loader" }, { loader: "babel-loader" }]
|
||||
});
|
||||
|
||||
return config;
|
||||
};
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
|
||||
// injected into the application via DefinePlugin in Webpack configuration.
|
||||
|
||||
var REACT_APP = /^REACT_APP_/i;
|
||||
|
||||
function getClientEnvironment(publicUrl) {
|
||||
var raw = Object
|
||||
.keys(process.env)
|
||||
.filter(key => REACT_APP.test(key))
|
||||
.reduce((env, key) => {
|
||||
env[key] = process.env[key];
|
||||
return env;
|
||||
}, {
|
||||
// Useful for determining whether we’re running in production mode.
|
||||
// Most importantly, it switches React into the correct mode.
|
||||
'NODE_ENV': process.env.NODE_ENV || 'development',
|
||||
// Useful for resolving the correct path to static assets in `public`.
|
||||
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
|
||||
// This should only be used as an escape hatch. Normally you would put
|
||||
// images into the `src` and `import` them in code to get their paths.
|
||||
'PUBLIC_URL': publicUrl
|
||||
});
|
||||
// Stringify all values so we can feed into Webpack DefinePlugin
|
||||
var stringified = {
|
||||
'process.env': Object
|
||||
.keys(raw)
|
||||
.reduce((env, key) => {
|
||||
env[key] = JSON.stringify(raw[key]);
|
||||
return env;
|
||||
}, {})
|
||||
};
|
||||
|
||||
return { raw, stringified };
|
||||
}
|
||||
|
||||
module.exports = getClientEnvironment;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
// This is a custom Jest transformer turning style imports into empty objects.
|
||||
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||
|
||||
module.exports = {
|
||||
process() {
|
||||
return 'module.exports = {};';
|
||||
},
|
||||
getCacheKey() {
|
||||
// The output is always the same.
|
||||
return 'cssTransform';
|
||||
},
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
|
||||
// This is a custom Jest transformer turning file imports into filenames.
|
||||
// http://facebook.github.io/jest/docs/tutorial-webpack.html
|
||||
|
||||
module.exports = {
|
||||
process(src, filename) {
|
||||
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
|
||||
},
|
||||
};
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
var path = require('path');
|
||||
var fs = require('fs');
|
||||
var url = require('url');
|
||||
|
||||
// Make sure any symlinks in the project folder are resolved:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/637
|
||||
var appDirectory = fs.realpathSync(process.cwd());
|
||||
function resolveApp(relativePath) {
|
||||
return path.resolve(appDirectory, relativePath);
|
||||
}
|
||||
|
||||
// We support resolving modules according to `NODE_PATH`.
|
||||
// This lets you use absolute paths in imports inside large monorepos:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253.
|
||||
|
||||
// It works similar to `NODE_PATH` in Node itself:
|
||||
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
|
||||
|
||||
// We will export `nodePaths` as an array of absolute paths.
|
||||
// It will then be used by Webpack configs.
|
||||
// Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
|
||||
|
||||
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
|
||||
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
|
||||
|
||||
var nodePaths = (process.env.NODE_PATH || '')
|
||||
.split(process.platform === 'win32' ? ';' : ':')
|
||||
.filter(Boolean)
|
||||
.filter(folder => !path.isAbsolute(folder))
|
||||
.map(resolveApp);
|
||||
|
||||
var envPublicUrl = process.env.PUBLIC_URL;
|
||||
|
||||
function ensureSlash(path, needsSlash) {
|
||||
var hasSlash = path.endsWith('/');
|
||||
if (hasSlash && !needsSlash) {
|
||||
return path.substr(path, path.length - 1);
|
||||
} else if (!hasSlash && needsSlash) {
|
||||
return path + '/';
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}
|
||||
|
||||
function getPublicUrl(appPackageJson) {
|
||||
return envPublicUrl || require(appPackageJson).homepage;
|
||||
}
|
||||
|
||||
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
|
||||
// "public path" at which the app is served.
|
||||
// Webpack needs to know it to put the right <script> hrefs into HTML even in
|
||||
// single-page apps that may serve index.html for nested URLs like /todos/42.
|
||||
// We can't use a relative path in HTML because we don't want to load something
|
||||
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
|
||||
function getServedPath(appPackageJson) {
|
||||
var publicUrl = getPublicUrl(appPackageJson);
|
||||
var servedUrl = envPublicUrl || (
|
||||
publicUrl ? url.parse(publicUrl).pathname : '/'
|
||||
);
|
||||
return ensureSlash(servedUrl, true);
|
||||
}
|
||||
|
||||
// config after eject: we're in ./config/
|
||||
module.exports = {
|
||||
appBuild: resolveApp('build'),
|
||||
appPublic: resolveApp('public'),
|
||||
appHtml: resolveApp('public/index.html'),
|
||||
appIndexJs: resolveApp('src/index.js'),
|
||||
appPackageJson: resolveApp('package.json'),
|
||||
appSrc: resolveApp('src'),
|
||||
yarnLockFile: resolveApp('yarn.lock'),
|
||||
testsSetup: resolveApp('src/setupTests.js'),
|
||||
appNodeModules: resolveApp('node_modules'),
|
||||
nodePaths: nodePaths,
|
||||
publicUrl: getPublicUrl(resolveApp('package.json')),
|
||||
servedPath: getServedPath(resolveApp('package.json'))
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
if (typeof Promise === 'undefined') {
|
||||
// Rejection tracking prevents a common issue where React gets into an
|
||||
// inconsistent state due to an error, but it gets swallowed by a Promise,
|
||||
// and the user has no idea what causes React's erratic future behavior.
|
||||
require('promise/lib/rejection-tracking').enable();
|
||||
window.Promise = require('promise/lib/es6-extensions.js');
|
||||
}
|
||||
|
||||
// fetch() polyfill for making API calls.
|
||||
require('whatwg-fetch');
|
||||
|
||||
// Object.assign() is commonly used with React.
|
||||
// It will use the native implementation if it's present and isn't buggy.
|
||||
Object.assign = require('object-assign');
|
||||
|
|
@ -1,226 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var webpack = require('webpack');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
|
||||
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
|
||||
var getClientEnvironment = require('./env');
|
||||
var paths = require('./paths');
|
||||
|
||||
|
||||
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// In development, we always serve from the root. This makes config easier.
|
||||
var publicPath = '/';
|
||||
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
|
||||
var publicUrl = '';
|
||||
// Get environment variables to inject into our app.
|
||||
var env = getClientEnvironment(publicUrl);
|
||||
|
||||
// This is the development configuration.
|
||||
// It is focused on developer experience and fast rebuilds.
|
||||
// The production configuration is different and lives in a separate file.
|
||||
module.exports = {
|
||||
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
|
||||
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
|
||||
devtool: 'cheap-module-source-map',
|
||||
// These are the "entry points" to our application.
|
||||
// This means they will be the "root" imports that are included in JS bundle.
|
||||
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
|
||||
entry: [
|
||||
// Include an alternative client for WebpackDevServer. A client's job is to
|
||||
// connect to WebpackDevServer by a socket and get notified about changes.
|
||||
// When you save a file, the client will either apply hot updates (in case
|
||||
// of CSS changes), or refresh the page (in case of JS changes). When you
|
||||
// make a syntax error, this client will display a syntax error overlay.
|
||||
// Note: instead of the default WebpackDevServer client, we use a custom one
|
||||
// to bring better experience for Create React App users. You can replace
|
||||
// the line below with these two lines if you prefer the stock client:
|
||||
// require.resolve('webpack-dev-server/client') + '?/',
|
||||
// require.resolve('webpack/hot/dev-server'),
|
||||
require.resolve('react-dev-utils/webpackHotDevClient'),
|
||||
// We ship a few polyfills by default:
|
||||
require.resolve('./polyfills'),
|
||||
// Finally, this is your app's code:
|
||||
paths.appIndexJs
|
||||
// We include the app code last so that if there is a runtime error during
|
||||
// initialization, it doesn't blow up the WebpackDevServer client, and
|
||||
// changing JS code would still trigger a refresh.
|
||||
],
|
||||
output: {
|
||||
// Next line is not used in dev but WebpackDevServer crashes without it:
|
||||
path: paths.appBuild,
|
||||
// Add /* filename */ comments to generated require()s in the output.
|
||||
pathinfo: true,
|
||||
// This does not produce a real file. It's just the virtual path that is
|
||||
// served by WebpackDevServer in development. This is the JS bundle
|
||||
// containing code from all our entry points, and the Webpack runtime.
|
||||
filename: 'static/js/bundle.js',
|
||||
// This is the URL that app is served from. We use "/" in development.
|
||||
publicPath: publicPath
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
|
||||
// We use `fallback` instead of `root` because we want `node_modules` to "win"
|
||||
// if there any conflicts. This matches Node resolution mechanism.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||
fallback: paths.nodePaths,
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||
extensions: ['.js', '.json', '.jsx', ''],
|
||||
alias: {
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
'react-native': 'react-native-web'
|
||||
}
|
||||
},
|
||||
|
||||
module: {
|
||||
// First, run the linter.
|
||||
// It's important to do this before Babel processes the JS.
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'eslint',
|
||||
include: paths.appSrc,
|
||||
}
|
||||
],
|
||||
loaders: [
|
||||
// ** ADDING/UPDATING LOADERS **
|
||||
// The "url" loader handles all assets unless explicitly excluded.
|
||||
// The `exclude` list *must* be updated with every change to loader extensions.
|
||||
// When adding a new loader, you must add its `test`
|
||||
// as a new entry in the `exclude` list for "url" loader.
|
||||
|
||||
// "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
|
||||
// Otherwise, it acts like the "file" loader.
|
||||
{
|
||||
exclude: [
|
||||
/\.html$/,
|
||||
// We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
|
||||
// because you might change the hot reloading server from the custom one
|
||||
// to Webpack's built-in webpack-dev-server/client?/, which would not
|
||||
// get properly excluded by /\.(js|jsx)$/ because of the query string.
|
||||
// Webpack 2 fixes this, but for now we include this hack.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/1713
|
||||
/\.(js|jsx)(\?.*)?$/,
|
||||
/\.css$/,
|
||||
/\.json$/,
|
||||
/\.svg$/,
|
||||
/\.png$/,
|
||||
],
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
include: paths.appSrc,
|
||||
loader: 'babel',
|
||||
query: {
|
||||
|
||||
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
||||
// It enables caching results in ./node_modules/.cache/babel-loader/
|
||||
// directory for faster rebuilds.
|
||||
cacheDirectory: true
|
||||
}
|
||||
},
|
||||
// "postcss" loader applies autoprefixer to our CSS.
|
||||
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||
// "style" loader turns CSS into JS modules that inject <style> tags.
|
||||
// In production, we use a plugin to extract that CSS to a file, but
|
||||
// in development "style" loader enables hot editing of CSS.
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'style!css?importLoaders=1!postcss'
|
||||
},
|
||||
// JSON is not enabled by default in Webpack but both Node and Browserify
|
||||
// allow it implicitly so we also enable it.
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
},
|
||||
// "file" loader for svg
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'file',
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /worker\.js$/,
|
||||
loaders: ['worker-loader', 'babel-loader'],
|
||||
include: paths.appSrc,
|
||||
use: [
|
||||
{ loader: 'worker-loader' },
|
||||
{ loader: 'babel-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
// static image loader
|
||||
test: /\.png$/,
|
||||
loader: 'base64-inline-loader?name=[name].[ext]'
|
||||
}
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
// Remember to add the new extension(s) to the "url" loader exclusion list.
|
||||
]
|
||||
},
|
||||
|
||||
// We use PostCSS for autoprefixing only.
|
||||
postcss: function() {
|
||||
return [
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
]
|
||||
}),
|
||||
];
|
||||
},
|
||||
plugins: [
|
||||
// Makes some environment variables available in index.html.
|
||||
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In development, this will be an empty string.
|
||||
new InterpolateHtmlPlugin(env.raw),
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
template: paths.appHtml,
|
||||
}),
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
// This is necessary to emit hot updates (currently CSS only):
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
// Watcher doesn't work well if you mistype casing in a path so we use
|
||||
// a plugin that prints an error when you attempt to do this.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/240
|
||||
new CaseSensitivePathsPlugin(),
|
||||
// If you require a missing module and then `npm install` it, you still have
|
||||
// to restart the development server for Webpack to discover it. This plugin
|
||||
// makes the discovery automatic so you don't have to restart.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/186
|
||||
new WatchMissingNodeModulesPlugin(paths.appNodeModules)
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty'
|
||||
}
|
||||
};
|
||||
|
|
@ -1,281 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var webpack = require('webpack');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var ManifestPlugin = require('webpack-manifest-plugin');
|
||||
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
|
||||
var paths = require('./paths');
|
||||
var path = require('path');
|
||||
var fs = require('fs')
|
||||
var getClientEnvironment = require('./env');
|
||||
var SentryPlugin = require('webpack-sentry-plugin');
|
||||
|
||||
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
var publicPath = paths.servedPath;
|
||||
// Some apps do not use client-side routing with pushState.
|
||||
// For these, "homepage" can be set to "." to enable relative asset paths.
|
||||
var shouldUseRelativeAssetPaths = publicPath === './';
|
||||
// `publicUrl` is just like `publicPath`, but we will provide it to our app
|
||||
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
|
||||
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
|
||||
var publicUrl = publicPath.slice(0, -1);
|
||||
// Get environment variables to inject into our app.
|
||||
var env = getClientEnvironment(publicUrl);
|
||||
|
||||
// Assert this just to be safe.
|
||||
// Development builds of React are slow and not intended for production.
|
||||
if (env.stringified['process.env'].NODE_ENV !== '"production"') {
|
||||
throw new Error('Production builds must have NODE_ENV=production.');
|
||||
}
|
||||
|
||||
// Note: defined here because it will be used more than once.
|
||||
const cssFilename = 'static/css/[name].[contenthash:8].css';
|
||||
|
||||
// ExtractTextPlugin expects the build output to be flat.
|
||||
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
|
||||
// However, our output is structured with css, js and media folders.
|
||||
// To have this structure working with relative paths, we have to use custom options.
|
||||
const extractTextPluginOptions = shouldUseRelativeAssetPaths
|
||||
// Making sure that the publicPath goes back to to build folder.
|
||||
? { publicPath: Array(cssFilename.split('/').length).join('../') }
|
||||
: undefined;
|
||||
|
||||
// This is the production configuration.
|
||||
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||
// The development configuration is different and lives in a separate file.
|
||||
module.exports = {
|
||||
// Don't attempt to continue if there are any errors.
|
||||
bail: true,
|
||||
// We generate sourcemaps in production. This is slow but gives good results.
|
||||
// You can exclude the *.map files from the build during deployment.
|
||||
devtool: 'source-map',
|
||||
// In production, we only want to load the polyfills and the app code.
|
||||
entry: [
|
||||
require.resolve('./polyfills'),
|
||||
paths.appIndexJs
|
||||
],
|
||||
output: {
|
||||
// The build folder.
|
||||
path: paths.appBuild,
|
||||
// Generated JS file names (with nested folders).
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// We don't currently advertise code splitting but Webpack supports it.
|
||||
filename: 'static/js/[name].[hash:8].js',
|
||||
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
publicPath: publicPath
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
|
||||
// We use `fallback` instead of `root` because we want `node_modules` to "win"
|
||||
// if there any conflicts. This matches Node resolution mechanism.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/253
|
||||
fallback: paths.nodePaths,
|
||||
// These are the reasonable defaults supported by the Node ecosystem.
|
||||
// We also include JSX as a common component filename extension to support
|
||||
// some tools, although we do not recommend using it, see:
|
||||
// https://github.com/facebookincubator/create-react-app/issues/290
|
||||
extensions: ['.js', '.json', '.jsx', ''],
|
||||
alias: {
|
||||
// Support React Native Web
|
||||
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
|
||||
'react-native': 'react-native-web'
|
||||
}
|
||||
},
|
||||
|
||||
module: {
|
||||
// First, run the linter.
|
||||
// It's important to do this before Babel processes the JS.
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'eslint',
|
||||
include: paths.appSrc
|
||||
}
|
||||
],
|
||||
loaders: [
|
||||
// ** ADDING/UPDATING LOADERS **
|
||||
// The "url" loader handles all assets unless explicitly excluded.
|
||||
// The `exclude` list *must* be updated with every change to loader extensions.
|
||||
// When adding a new loader, you must add its `test`
|
||||
// as a new entry in the `exclude` list in the "url" loader.
|
||||
|
||||
// "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
|
||||
// Otherwise, it acts like the "file" loader.
|
||||
{
|
||||
exclude: [
|
||||
/\.html$/,
|
||||
/\.(js|jsx)$/,
|
||||
/\.css$/,
|
||||
/\.json$/,
|
||||
/\.svg$/,
|
||||
/\.png$/
|
||||
],
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
// Process JS with Babel.
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
include: paths.appSrc,
|
||||
loader: 'babel',
|
||||
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
include: path.resolve(fs.realpathSync(process.cwd()), 'node_modules/streamsaver'),
|
||||
loader: 'babel',
|
||||
|
||||
},
|
||||
// The notation here is somewhat confusing.
|
||||
// "postcss" loader applies autoprefixer to our CSS.
|
||||
// "css" loader resolves paths in CSS and adds assets as dependencies.
|
||||
// "style" loader normally turns CSS into JS modules injecting <style>,
|
||||
// but unlike in development configuration, we do something different.
|
||||
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
|
||||
// (second argument), then grabs the result CSS and puts it into a
|
||||
// separate file in our build process. This way we actually ship
|
||||
// a single CSS file in production instead of JS code injecting <style>
|
||||
// tags. If you use code splitting, however, any async bundles will still
|
||||
// use the "style" loader inside the async code so CSS from them won't be
|
||||
// in the main CSS file.
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: ExtractTextPlugin.extract(
|
||||
'style',
|
||||
'css?importLoaders=1!postcss',
|
||||
extractTextPluginOptions
|
||||
)
|
||||
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
|
||||
},
|
||||
// JSON is not enabled by default in Webpack but both Node and Browserify
|
||||
// allow it implicitly so we also enable it.
|
||||
{
|
||||
test: /\.json$/,
|
||||
loader: 'json'
|
||||
},
|
||||
// "file" loader for svg
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'file',
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /worker\.js$/,
|
||||
loaders: ['worker-loader', 'babel-loader'],
|
||||
include: paths.appSrc,
|
||||
use: [
|
||||
{ loader: 'worker-loader' },
|
||||
{ loader: 'babel-loader' }
|
||||
]
|
||||
},
|
||||
{
|
||||
// static image loader
|
||||
test: /\.png$/,
|
||||
loader: 'base64-inline-loader?name=[name].[ext]'
|
||||
}
|
||||
// ** STOP ** Are you adding a new loader?
|
||||
// Remember to add the new extension(s) to the "url" loader exclusion list.
|
||||
]
|
||||
},
|
||||
|
||||
// We use PostCSS for autoprefixing only.
|
||||
postcss: function() {
|
||||
return [
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
]
|
||||
}),
|
||||
];
|
||||
},
|
||||
plugins: [
|
||||
// Makes some environment variables available in index.html.
|
||||
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In production, it will be an empty string unless you specify "homepage"
|
||||
// in `package.json`, in which case it will be the pathname of that URL.
|
||||
new InterpolateHtmlPlugin(env.raw),
|
||||
// Generates an `index.html` file with the <script> injected.
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
template: paths.appHtml,
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}),
|
||||
// Makes some environment variables available to the JS code, for example:
|
||||
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
|
||||
// It is absolutely essential that NODE_ENV was set to production here.
|
||||
// Otherwise React will be compiled in the very slow development mode.
|
||||
new webpack.DefinePlugin(env.stringified),
|
||||
// This helps ensure the builds are consistent if source hasn't changed:
|
||||
new webpack.optimize.OccurrenceOrderPlugin(),
|
||||
// Try to dedupe duplicated modules, if any:
|
||||
new webpack.optimize.DedupePlugin(),
|
||||
// Minify the code.
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
screw_ie8: true, // React doesn't support IE8
|
||||
warnings: false
|
||||
},
|
||||
mangle: {
|
||||
screw_ie8: true
|
||||
},
|
||||
output: {
|
||||
comments: false,
|
||||
screw_ie8: true
|
||||
}
|
||||
}),
|
||||
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||
new ExtractTextPlugin(cssFilename),
|
||||
// Generate a manifest file which contains a mapping of all asset filenames
|
||||
// to their corresponding output file so that tools can pick it up without
|
||||
// having to parse `index.html`.
|
||||
new ManifestPlugin({
|
||||
fileName: 'asset-manifest.json'
|
||||
}),
|
||||
new SentryPlugin({
|
||||
organisation: 'commaai',
|
||||
project: 'cabana',
|
||||
apiKey: '7a932ab144984dd3979993cf61dbdd2a1489ac77af4d4f46b85d64598b9a4ca6',
|
||||
release: function(hash) {
|
||||
return hash; // webpack build hash
|
||||
},
|
||||
filenameTransform: function(filename) {
|
||||
return `~${publicUrl}/${filename}`;
|
||||
},
|
||||
suppressConflictError: true
|
||||
}),
|
||||
new webpack.ExtendedAPIPlugin()
|
||||
],
|
||||
// Some libraries import Node modules but don't use them in the browser.
|
||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
||||
node: {
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty'
|
||||
}
|
||||
};
|
||||
93
package.json
93
package.json
|
|
@ -23,113 +23,40 @@
|
|||
"moment": "^2.18.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"raven-js": "^3.16.0",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react": "^16.2.0",
|
||||
"react-app-rewired": "^1.3.8",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-infinite": "^0.11.0",
|
||||
"react-list": "^0.8.6",
|
||||
"react-measure": "^2.0.2",
|
||||
"react-scripts": "1.0.17",
|
||||
"react-test-renderer": "^15.6.1",
|
||||
"react-vega": "^3.0.0",
|
||||
"react-visibility-sensor": "^3.10.1",
|
||||
"simple-statistics": "^4.1.0",
|
||||
"socket.io-client": "^2.0.3",
|
||||
"streamsaver": "^1.0.1",
|
||||
"vega": "git+ssh://git@github.com/commaai/vega.git#HEAD",
|
||||
"vega": "3.0.0",
|
||||
"vega-tooltip": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "6.7.2",
|
||||
"babel-core": "6.22.1",
|
||||
"babel-eslint": "7.1.1",
|
||||
"babel-jest": "18.0.0",
|
||||
"babel-loader": "6.2.10",
|
||||
"babel-preset-react-app": "^2.2.0",
|
||||
"babel-runtime": "^6.20.0",
|
||||
"case-sensitive-paths-webpack-plugin": "1.1.4",
|
||||
"chalk": "1.1.3",
|
||||
"connect-history-api-fallback": "1.3.0",
|
||||
"cross-spawn": "4.0.2",
|
||||
"css-loader": "0.26.1",
|
||||
"detect-port": "1.1.0",
|
||||
"dotenv": "2.0.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"eslint": "3.16.1",
|
||||
"eslint-config-react-app": "^0.6.2",
|
||||
"eslint-loader": "1.6.0",
|
||||
"eslint-plugin-flowtype": "2.21.0",
|
||||
"eslint-plugin-import": "2.0.1",
|
||||
"eslint-plugin-jsx-a11y": "4.0.0",
|
||||
"eslint-plugin-react": "6.4.1",
|
||||
"extract-text-webpack-plugin": "1.0.1",
|
||||
"file-loader": "0.10.0",
|
||||
"fs-extra": "0.30.0",
|
||||
"html-webpack-plugin": "2.24.0",
|
||||
"http-proxy-middleware": "0.17.3",
|
||||
"jest": "18.1.0",
|
||||
"json-loader": "0.5.4",
|
||||
"object-assign": "4.1.1",
|
||||
"postcss-loader": "1.2.2",
|
||||
"promise": "7.1.1",
|
||||
"react-dev-utils": "^0.5.2",
|
||||
"style-loader": "0.13.1",
|
||||
"url-loader": "0.5.7",
|
||||
"url-toolkit": "^2.1.1",
|
||||
"webpack": "1.14.0",
|
||||
"webpack-dev-server": "1.16.2",
|
||||
"webpack-manifest-plugin": "1.1.0",
|
||||
"webpack-sentry-plugin": "^1.14.0",
|
||||
"webworkify": "^1.4.0",
|
||||
"whatwg-fetch": "2.0.2",
|
||||
"worker-loader": "^0.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "python simple-cors-http-server.py & python server.py & npm run sass & node scripts/start.js",
|
||||
"build": "node scripts/build.js",
|
||||
"test": "node scripts/test.js --env=jsdom",
|
||||
"sass": "scss src/index.scss:src/index.css; sass --watch src/index.scss:src/index.css"
|
||||
},
|
||||
"esLintConfig": {
|
||||
"rules": {
|
||||
"no-use-before-define": "off"
|
||||
}
|
||||
},
|
||||
"jest": {
|
||||
"globals": {
|
||||
"config": {
|
||||
"__JEST__": 1
|
||||
}
|
||||
},
|
||||
"timers": "fake",
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx}"
|
||||
],
|
||||
"setupFiles": [
|
||||
"<rootDir>/config/polyfills.js"
|
||||
],
|
||||
"testPathIgnorePatterns": [
|
||||
"<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]",
|
||||
"<rootDir>/src/__tests__/res"
|
||||
],
|
||||
"testEnvironment": "node",
|
||||
"testURL": "http://localhost",
|
||||
"transform": {
|
||||
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
|
||||
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
|
||||
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
|
||||
},
|
||||
"transformIgnorePatterns": [
|
||||
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
|
||||
],
|
||||
"moduleNameMapper": {
|
||||
"^react-native$": "react-native-web"
|
||||
}
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"react-app"
|
||||
]
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
"start": "react-app-rewired start",
|
||||
"build": "react-app-rewired build",
|
||||
"test": "react-app-rewired test --env=jsdom",
|
||||
"sass":
|
||||
"scss src/index.scss:src/index.css; sass --watch src/index.scss:src/index.css"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,40 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>comma cabana</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
ga('create', 'UA-80079182-4', 'auto');
|
||||
ga('send', 'pageview');
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
</script>
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
158
scripts/build.js
158
scripts/build.js
|
|
@ -1,158 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
// Do this as the first thing so that any code reading it knows the right env.
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
// Load environment variables from .env file. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set.
|
||||
// https://github.com/motdotla/dotenv
|
||||
require('dotenv').config({silent: true});
|
||||
|
||||
var chalk = require('chalk');
|
||||
var fs = require('fs-extra');
|
||||
var path = require('path');
|
||||
var url = require('url');
|
||||
var webpack = require('webpack');
|
||||
var config = require('../config/webpack.config.prod');
|
||||
var paths = require('../config/paths');
|
||||
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
var FileSizeReporter = require('react-dev-utils/FileSizeReporter');
|
||||
var measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
|
||||
var printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
|
||||
|
||||
var useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// First, read the current file sizes in build directory.
|
||||
// This lets us display how much they changed later.
|
||||
measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
|
||||
// Remove all content but keep the directory so that
|
||||
// if you're in it, you don't end up in Trash
|
||||
fs.emptyDirSync(paths.appBuild);
|
||||
|
||||
// Start the webpack build
|
||||
build(previousFileSizes);
|
||||
|
||||
// Merge with the public folder
|
||||
copyPublicFolder();
|
||||
});
|
||||
|
||||
// Print out errors
|
||||
function printErrors(summary, errors) {
|
||||
console.log(chalk.red(summary));
|
||||
console.log();
|
||||
errors.forEach(err => {
|
||||
console.log(err.message || err);
|
||||
console.log();
|
||||
});
|
||||
}
|
||||
|
||||
// Create the production build and print the deployment instructions.
|
||||
function build(previousFileSizes) {
|
||||
console.log('Creating an optimized production build...');
|
||||
webpack(config).run((err, stats) => {
|
||||
if (err) {
|
||||
printErrors('Failed to compile.', [err]);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (stats.compilation.errors.length) {
|
||||
printErrors('Failed to compile.', stats.compilation.errors);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (process.env.CI && stats.compilation.warnings.length) {
|
||||
printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log(chalk.green('Compiled successfully.'));
|
||||
console.log();
|
||||
|
||||
console.log('File sizes after gzip:');
|
||||
console.log();
|
||||
printFileSizesAfterBuild(stats, previousFileSizes);
|
||||
console.log();
|
||||
|
||||
var appPackage = require(paths.appPackageJson);
|
||||
var publicUrl = paths.publicUrl;
|
||||
var publicPath = config.output.publicPath;
|
||||
var publicPathname = url.parse(publicPath).pathname;
|
||||
if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
|
||||
// "homepage": "http://user.github.io/project"
|
||||
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPathname) + '.');
|
||||
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||
console.log();
|
||||
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
|
||||
console.log('To publish it at ' + chalk.green(publicUrl) + ', run:');
|
||||
// If script deploy has been added to package.json, skip the instructions
|
||||
if (typeof appPackage.scripts.deploy === 'undefined') {
|
||||
console.log();
|
||||
if (useYarn) {
|
||||
console.log(' ' + chalk.cyan('yarn') + ' add --dev gh-pages');
|
||||
} else {
|
||||
console.log(' ' + chalk.cyan('npm') + ' install --save-dev gh-pages');
|
||||
}
|
||||
console.log();
|
||||
console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
|
||||
console.log();
|
||||
console.log(' ' + chalk.dim('// ...'));
|
||||
console.log(' ' + chalk.yellow('"scripts"') + ': {');
|
||||
console.log(' ' + chalk.dim('// ...'));
|
||||
console.log(' ' + chalk.yellow('"predeploy"') + ': ' + chalk.yellow('"npm run build",'));
|
||||
console.log(' ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
|
||||
console.log(' }');
|
||||
console.log();
|
||||
console.log('Then run:');
|
||||
}
|
||||
console.log();
|
||||
console.log(' ' + chalk.cyan(useYarn ? 'yarn' : 'npm') + ' run deploy');
|
||||
console.log();
|
||||
} else if (publicPath !== '/') {
|
||||
// "homepage": "http://mywebsite.com/project"
|
||||
console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
|
||||
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||
console.log();
|
||||
console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
|
||||
console.log();
|
||||
} else {
|
||||
if (publicUrl) {
|
||||
// "homepage": "http://mywebsite.com"
|
||||
console.log('The project was built assuming it is hosted at ' + chalk.green(publicUrl) + '.');
|
||||
console.log('You can control this with the ' + chalk.green('homepage') + ' field in your ' + chalk.cyan('package.json') + '.');
|
||||
console.log();
|
||||
} else {
|
||||
// no homepage
|
||||
console.log('The project was built assuming it is hosted at the server root.');
|
||||
console.log('To override this, specify the ' + chalk.green('homepage') + ' in your ' + chalk.cyan('package.json') + '.');
|
||||
console.log('For example, add this to build it for GitHub Pages:')
|
||||
console.log();
|
||||
console.log(' ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
|
||||
console.log();
|
||||
}
|
||||
var build = path.relative(process.cwd(), paths.appBuild);
|
||||
console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
|
||||
console.log('You may serve it with a static server:');
|
||||
console.log();
|
||||
if (useYarn) {
|
||||
console.log(` ${chalk.cyan('yarn')} global add serve`);
|
||||
} else {
|
||||
console.log(` ${chalk.cyan('npm')} install -g serve`);
|
||||
}
|
||||
console.log(` ${chalk.cyan('serve')} -s build`);
|
||||
console.log();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function copyPublicFolder() {
|
||||
fs.copySync(paths.appPublic, paths.appBuild, {
|
||||
dereference: true,
|
||||
filter: file => file !== paths.appHtml
|
||||
});
|
||||
}
|
||||
316
scripts/start.js
316
scripts/start.js
|
|
@ -1,316 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
// Load environment variables from .env file. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set.
|
||||
// https://github.com/motdotla/dotenv
|
||||
require('dotenv').config({silent: true});
|
||||
|
||||
var chalk = require('chalk');
|
||||
var webpack = require('webpack');
|
||||
var WebpackDevServer = require('webpack-dev-server');
|
||||
var historyApiFallback = require('connect-history-api-fallback');
|
||||
var httpProxyMiddleware = require('http-proxy-middleware');
|
||||
var detect = require('detect-port');
|
||||
var clearConsole = require('react-dev-utils/clearConsole');
|
||||
var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
|
||||
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
|
||||
var getProcessForPort = require('react-dev-utils/getProcessForPort');
|
||||
var openBrowser = require('react-dev-utils/openBrowser');
|
||||
var prompt = require('react-dev-utils/prompt');
|
||||
var fs = require('fs');
|
||||
var config = require('../config/webpack.config.dev');
|
||||
var paths = require('../config/paths');
|
||||
|
||||
var useYarn = fs.existsSync(paths.yarnLockFile);
|
||||
var cli = useYarn ? 'yarn' : 'npm';
|
||||
var isInteractive = process.stdout.isTTY;
|
||||
|
||||
// Warn and crash if required files are missing
|
||||
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Tools like Cloud9 rely on this.
|
||||
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
|
||||
var compiler;
|
||||
var handleCompile;
|
||||
|
||||
// You can safely remove this after ejecting.
|
||||
// We only use this block for testing of Create React App itself:
|
||||
var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
|
||||
if (isSmokeTest) {
|
||||
handleCompile = function (err, stats) {
|
||||
if (err || stats.hasErrors() || stats.hasWarnings()) {
|
||||
process.exit(1);
|
||||
} else {
|
||||
process.exit(0);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setupCompiler(host, port, protocol) {
|
||||
// "Compiler" is a low-level interface to Webpack.
|
||||
// It lets us listen to some events and provide our own custom messages.
|
||||
compiler = webpack(config, handleCompile);
|
||||
|
||||
// "invalid" event fires when you have changed a file, and Webpack is
|
||||
// recompiling a bundle. WebpackDevServer takes care to pause serving the
|
||||
// bundle, so if you refresh, it'll wait instead of serving the old one.
|
||||
// "invalid" is short for "bundle invalidated", it doesn't imply any errors.
|
||||
compiler.plugin('invalid', function() {
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
console.log('Compiling...');
|
||||
});
|
||||
|
||||
var isFirstCompile = true;
|
||||
|
||||
// "done" event fires when Webpack has finished recompiling the bundle.
|
||||
// Whether or not you have warnings or errors, you will get this event.
|
||||
compiler.plugin('done', function(stats) {
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
|
||||
// We have switched off the default Webpack output in WebpackDevServer
|
||||
// options so we are going to "massage" the warnings and errors and present
|
||||
// them in a readable focused way.
|
||||
var messages = formatWebpackMessages(stats.toJson({}, true));
|
||||
var isSuccessful = !messages.errors.length && !messages.warnings.length;
|
||||
var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
|
||||
|
||||
if (isSuccessful) {
|
||||
console.log(chalk.green('Compiled successfully!'));
|
||||
}
|
||||
|
||||
if (showInstructions) {
|
||||
console.log();
|
||||
console.log('The app is running at:');
|
||||
console.log();
|
||||
console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
|
||||
console.log();
|
||||
console.log('Note that the development build is not optimized.');
|
||||
console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
|
||||
console.log();
|
||||
isFirstCompile = false;
|
||||
}
|
||||
|
||||
// If errors exist, only show errors.
|
||||
if (messages.errors.length) {
|
||||
console.log(chalk.red('Failed to compile.'));
|
||||
console.log();
|
||||
messages.errors.forEach(message => {
|
||||
console.log(message);
|
||||
console.log();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Show warnings if no errors were found.
|
||||
if (messages.warnings.length) {
|
||||
console.log(chalk.yellow('Compiled with warnings.'));
|
||||
console.log();
|
||||
messages.warnings.forEach(message => {
|
||||
console.log(message);
|
||||
console.log();
|
||||
});
|
||||
// Teach some ESLint tricks.
|
||||
console.log('You may use special comments to disable some warnings.');
|
||||
console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
|
||||
console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// We need to provide a custom onError function for httpProxyMiddleware.
|
||||
// It allows us to log custom error messages on the console.
|
||||
function onProxyError(proxy) {
|
||||
return function(err, req, res){
|
||||
var host = req.headers && req.headers.host;
|
||||
console.log(
|
||||
chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
|
||||
' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
|
||||
);
|
||||
console.log(
|
||||
'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
|
||||
chalk.cyan(err.code) + ').'
|
||||
);
|
||||
console.log();
|
||||
|
||||
// And immediately send the proper error response to the client.
|
||||
// Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
|
||||
if (res.writeHead && !res.headersSent) {
|
||||
res.writeHead(500);
|
||||
}
|
||||
res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
|
||||
host + ' to ' + proxy + ' (' + err.code + ').'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function addMiddleware(devServer) {
|
||||
// `proxy` lets you to specify a fallback server during development.
|
||||
// Every unrecognized request will be forwarded to it.
|
||||
var proxy = require(paths.appPackageJson).proxy;
|
||||
devServer.use(historyApiFallback({
|
||||
// Paths with dots should still use the history fallback.
|
||||
// See https://github.com/facebookincubator/create-react-app/issues/387.
|
||||
disableDotRule: true,
|
||||
// For single page apps, we generally want to fallback to /index.html.
|
||||
// However we also want to respect `proxy` for API calls.
|
||||
// So if `proxy` is specified, we need to decide which fallback to use.
|
||||
// We use a heuristic: if request `accept`s text/html, we pick /index.html.
|
||||
// Modern browsers include text/html into `accept` header when navigating.
|
||||
// However API calls like `fetch()` won’t generally accept text/html.
|
||||
// If this heuristic doesn’t work well for you, don’t use `proxy`.
|
||||
htmlAcceptHeaders: proxy ?
|
||||
['text/html'] :
|
||||
['text/html', '*/*']
|
||||
}));
|
||||
if (proxy) {
|
||||
if (typeof proxy !== 'string') {
|
||||
console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
|
||||
console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
|
||||
console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Otherwise, if proxy is specified, we will let it handle any request.
|
||||
// There are a few exceptions which we won't send to the proxy:
|
||||
// - /index.html (served as HTML5 history API fallback)
|
||||
// - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
|
||||
// - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
|
||||
// Tip: use https://jex.im/regulex/ to visualize the regex
|
||||
var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
|
||||
|
||||
// Pass the scope regex both to Express and to the middleware for proxying
|
||||
// of both HTTP and WebSockets to work without false positives.
|
||||
var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
|
||||
target: proxy,
|
||||
logLevel: 'silent',
|
||||
onProxyReq: function(proxyReq) {
|
||||
// Browers may send Origin headers even with same-origin
|
||||
// requests. To prevent CORS issues, we have to change
|
||||
// the Origin to match the target URL.
|
||||
if (proxyReq.getHeader('origin')) {
|
||||
proxyReq.setHeader('origin', proxy);
|
||||
}
|
||||
},
|
||||
onError: onProxyError(proxy),
|
||||
secure: false,
|
||||
changeOrigin: true,
|
||||
ws: true,
|
||||
xfwd: true
|
||||
});
|
||||
devServer.use(mayProxy, hpm);
|
||||
|
||||
// Listen for the websocket 'upgrade' event and upgrade the connection.
|
||||
// If this is not done, httpProxyMiddleware will not try to upgrade until
|
||||
// an initial plain HTTP request is made.
|
||||
devServer.listeningApp.on('upgrade', hpm.upgrade);
|
||||
}
|
||||
|
||||
// Finally, by now we have certainly resolved the URL.
|
||||
// It may be /index.html, so let the dev server try serving it again.
|
||||
devServer.use(devServer.middleware);
|
||||
}
|
||||
|
||||
function runDevServer(host, port, protocol) {
|
||||
var devServer = new WebpackDevServer(compiler, {
|
||||
// Enable gzip compression of generated files.
|
||||
compress: true,
|
||||
// Silence WebpackDevServer's own logs since they're generally not useful.
|
||||
// It will still show compile warnings and errors with this setting.
|
||||
clientLogLevel: 'none',
|
||||
// By default WebpackDevServer serves physical files from current directory
|
||||
// in addition to all the virtual build products that it serves from memory.
|
||||
// This is confusing because those files won’t automatically be available in
|
||||
// production build folder unless we copy them. However, copying the whole
|
||||
// project directory is dangerous because we may expose sensitive files.
|
||||
// Instead, we establish a convention that only files in `public` directory
|
||||
// get served. Our build script will copy `public` into the `build` folder.
|
||||
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
|
||||
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
|
||||
// Note that we only recommend to use `public` folder as an escape hatch
|
||||
// for files like `favicon.ico`, `manifest.json`, and libraries that are
|
||||
// for some reason broken when imported through Webpack. If you just want to
|
||||
// use an image, put it in `src` and `import` it from JavaScript instead.
|
||||
contentBase: paths.appPublic,
|
||||
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
|
||||
// for the WebpackDevServer client so it can learn when the files were
|
||||
// updated. The WebpackDevServer client is included as an entry point
|
||||
// in the Webpack development configuration. Note that only changes
|
||||
// to CSS are currently hot reloaded. JS changes will refresh the browser.
|
||||
hot: true,
|
||||
// It is important to tell WebpackDevServer to use the same "root" path
|
||||
// as we specified in the config. In development, we always serve from /.
|
||||
publicPath: config.output.publicPath,
|
||||
// WebpackDevServer is noisy by default so we emit custom message instead
|
||||
// by listening to the compiler events with `compiler.plugin` calls above.
|
||||
quiet: true,
|
||||
// Reportedly, this avoids CPU overload on some systems.
|
||||
// https://github.com/facebookincubator/create-react-app/issues/293
|
||||
watchOptions: {
|
||||
ignored: /node_modules/
|
||||
},
|
||||
// Enable HTTPS if the HTTPS environment variable is set to 'true'
|
||||
https: protocol === "https",
|
||||
host: host
|
||||
});
|
||||
|
||||
// Our custom middleware proxies requests to /index.html or a remote API.
|
||||
addMiddleware(devServer);
|
||||
|
||||
// Launch WebpackDevServer.
|
||||
devServer.listen(port, err => {
|
||||
if (err) {
|
||||
return console.log(err);
|
||||
}
|
||||
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
}
|
||||
console.log(chalk.cyan('Starting the development server...'));
|
||||
console.log();
|
||||
|
||||
openBrowser(protocol + '://' + host + ':' + port + '/');
|
||||
});
|
||||
}
|
||||
|
||||
function run(port) {
|
||||
var protocol = process.env.HTTPS === 'true' ? "https" : "http";
|
||||
var host = process.env.HOST || 'localhost';
|
||||
setupCompiler(host, port, protocol);
|
||||
runDevServer(host, port, protocol);
|
||||
}
|
||||
|
||||
// We attempt to use the default port but if it is busy, we offer the user to
|
||||
// run on a different port. `detect()` Promise resolves to the next free port.
|
||||
detect(DEFAULT_PORT).then(port => {
|
||||
if (port === DEFAULT_PORT) {
|
||||
run(port);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isInteractive) {
|
||||
clearConsole();
|
||||
var existingProcess = getProcessForPort(DEFAULT_PORT);
|
||||
var question =
|
||||
chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
|
||||
((existingProcess) ? ' Probably:\n ' + existingProcess : '')) +
|
||||
'\n\nWould you like to run the app on another port instead?';
|
||||
|
||||
prompt(question, true).then(shouldChangePort => {
|
||||
if (shouldChangePort) {
|
||||
run(port);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
|
||||
}
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
process.env.NODE_ENV = 'test';
|
||||
process.env.PUBLIC_URL = '';
|
||||
|
||||
// Load environment variables from .env file. Suppress warnings using silent
|
||||
// if this file is missing. dotenv will never modify any environment variables
|
||||
// that have already been set.
|
||||
// https://github.com/motdotla/dotenv
|
||||
require('dotenv').config({silent: true});
|
||||
|
||||
const jest = require('jest');
|
||||
const argv = process.argv.slice(2);
|
||||
|
||||
// Watch unless on CI or in coverage mode
|
||||
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
|
||||
argv.push('--watch');
|
||||
}
|
||||
|
||||
|
||||
jest.run(argv);
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
#!/usr/bin/env python2
|
||||
from SimpleHTTPServer import SimpleHTTPRequestHandler
|
||||
import BaseHTTPServer
|
||||
|
||||
class CORSRequestHandler (SimpleHTTPRequestHandler):
|
||||
def end_headers (self):
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
SimpleHTTPRequestHandler.end_headers(self)
|
||||
|
||||
if __name__ == '__main__':
|
||||
BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)
|
||||
|
||||
1507
src/CanExplorer.js
1507
src/CanExplorer.js
File diff suppressed because it is too large
Load Diff
|
|
@ -1,158 +1,187 @@
|
|||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
require('element-closest');
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import CanGraph from './CanGraph';
|
||||
import CanGraph from "./CanGraph";
|
||||
|
||||
require("element-closest");
|
||||
|
||||
export default class CanGraphList extends Component {
|
||||
static propTypes = {
|
||||
plottedSignals: PropTypes.array.isRequired,
|
||||
messages: PropTypes.object.isRequired,
|
||||
graphData: PropTypes.array.isRequired,
|
||||
onGraphTimeClick: PropTypes.func.isRequired,
|
||||
seekTime: PropTypes.number.isRequired,
|
||||
onSegmentChanged: PropTypes.func.isRequired,
|
||||
onSignalUnplotPressed: PropTypes.func.isRequired,
|
||||
segment: PropTypes.array.isRequired,
|
||||
mergePlots: PropTypes.func.isRequired,
|
||||
static propTypes = {
|
||||
plottedSignals: PropTypes.array.isRequired,
|
||||
messages: PropTypes.object.isRequired,
|
||||
graphData: PropTypes.array.isRequired,
|
||||
onGraphTimeClick: PropTypes.func.isRequired,
|
||||
seekTime: PropTypes.number.isRequired,
|
||||
onSegmentChanged: PropTypes.func.isRequired,
|
||||
onSignalUnplotPressed: PropTypes.func.isRequired,
|
||||
segment: PropTypes.array.isRequired,
|
||||
mergePlots: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
draggingSignal: {},
|
||||
dragPos: null,
|
||||
dragShift: null,
|
||||
graphToReceiveDrop: null
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.plotListRef = null;
|
||||
this.plotRefs = [];
|
||||
this.renderSignalPlot = this.renderSignalPlot.bind(this);
|
||||
this.onPlotListRefReady = this.onPlotListRefReady.bind(this);
|
||||
this.onGraphDragStart = this.onGraphDragStart.bind(this);
|
||||
this.onGraphDragEnd = this.onGraphDragEnd.bind(this);
|
||||
this.onMouseMove = this.onMouseMove.bind(this);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
draggingSignal: {},
|
||||
dragPos: null,
|
||||
dragShift: null,
|
||||
graphToReceiveDrop: null,
|
||||
};
|
||||
onGraphDragStart(messageId, signalUid, shiftX, shiftY) {
|
||||
this.setState({
|
||||
draggingSignal: { messageId, signalUid },
|
||||
dragShift: { x: shiftX, y: shiftY }
|
||||
});
|
||||
}
|
||||
|
||||
this.plotListRef = null;
|
||||
this.plotRefs = [];
|
||||
this.renderSignalPlot = this.renderSignalPlot.bind(this);
|
||||
this.onPlotListRefReady = this.onPlotListRefReady.bind(this);
|
||||
this.onGraphDragStart = this.onGraphDragStart.bind(this);
|
||||
this.onGraphDragEnd = this.onGraphDragEnd.bind(this);
|
||||
this.onMouseMove = this.onMouseMove.bind(this);
|
||||
determineDraggingGraph() {
|
||||
const { draggingSignal } = this.state;
|
||||
return this.plotRefs.find(
|
||||
({ messageId, signalUid }) =>
|
||||
draggingSignal.messageId === messageId &&
|
||||
draggingSignal.signalUid === signalUid
|
||||
);
|
||||
}
|
||||
|
||||
onMouseMove(e) {
|
||||
const { dragShift } = this.state;
|
||||
if (dragShift === null) {
|
||||
if (this.state.graphToReceiveDrop !== null) {
|
||||
this.setState({ graphToReceiveDrop: null });
|
||||
}
|
||||
return;
|
||||
}
|
||||
const rect = this.plotListRef.getBoundingClientRect();
|
||||
const draggingGraph = this.determineDraggingGraph();
|
||||
if (draggingGraph) {
|
||||
draggingGraph.ref.hidden = true;
|
||||
const ele = document.elementFromPoint(e.clientX, e.clientY);
|
||||
draggingGraph.ref.hidden = false;
|
||||
const closestPlot = ele.closest(".cabana-explorer-visuals-plot");
|
||||
const closestPlotRef = this.plotRefs.find(
|
||||
({ ref, messageId, signalUid }) =>
|
||||
!(
|
||||
messageId === draggingGraph.messageId &&
|
||||
signalUid === draggingGraph.signalUid
|
||||
) && ref.isEqualNode(closestPlot)
|
||||
);
|
||||
if (closestPlotRef) {
|
||||
this.setState({ graphToReceiveDrop: closestPlotRef });
|
||||
} else {
|
||||
this.setState({ graphToReceiveDrop: null });
|
||||
}
|
||||
}
|
||||
const left = e.clientX - rect.left - dragShift.x;
|
||||
const top = e.clientY - rect.top - dragShift.y;
|
||||
|
||||
this.setState({ dragPos: { left, top } });
|
||||
}
|
||||
|
||||
onGraphDragEnd() {
|
||||
if (this.state.graphToReceiveDrop !== null) {
|
||||
this.props.mergePlots({
|
||||
fromPlot: this.state.draggingSignal,
|
||||
toPlot: this.state.graphToReceiveDrop
|
||||
});
|
||||
}
|
||||
|
||||
onGraphDragStart(messageId, signalUid, shiftX, shiftY) {
|
||||
this.setState({draggingSignal: {messageId, signalUid},
|
||||
dragShift: {x: shiftX, y: shiftY}});
|
||||
this.setState({
|
||||
draggingSignal: {},
|
||||
dragShift: null,
|
||||
dragPos: null,
|
||||
graphToReceiveDrop: null
|
||||
});
|
||||
}
|
||||
|
||||
addCanGraphRef(ref, messageId, signalUid) {
|
||||
if (ref) {
|
||||
let { plotRefs } = this;
|
||||
plotRefs = plotRefs
|
||||
.filter(
|
||||
ref => !(ref.messageId === messageId && ref.signalUid === signalUid)
|
||||
)
|
||||
.concat([{ messageId, signalUid, ref }]);
|
||||
this.plotRefs = plotRefs;
|
||||
}
|
||||
}
|
||||
|
||||
determineDraggingGraph() {
|
||||
const {draggingSignal} = this.state;
|
||||
return this.plotRefs.find(
|
||||
({messageId, signalUid}) =>
|
||||
draggingSignal.messageId === messageId
|
||||
&& draggingSignal.signalUid === signalUid);
|
||||
}
|
||||
renderSignalPlot(plottedSignals, index) {
|
||||
const { draggingSignal, graphToReceiveDrop } = this.state;
|
||||
const { messageId, signalUid } = plottedSignals[0];
|
||||
const msg = this.props.messages[messageId];
|
||||
const signal = Object.values(msg.frame.signals).find(
|
||||
s => s.uid === signalUid
|
||||
);
|
||||
|
||||
onMouseMove(e) {
|
||||
const {dragShift} = this.state;
|
||||
if(dragShift === null) {
|
||||
if(this.state.graphToReceiveDrop !== null) {
|
||||
this.setState({graphToReceiveDrop: null});
|
||||
}
|
||||
return;
|
||||
}
|
||||
const rect = this.plotListRef.getBoundingClientRect();
|
||||
const draggingGraph = this.determineDraggingGraph();
|
||||
if(draggingGraph) {
|
||||
draggingGraph.ref.hidden = true;
|
||||
const ele = document.elementFromPoint(e.clientX, e.clientY);
|
||||
draggingGraph.ref.hidden = false;
|
||||
const closestPlot = ele.closest('.cabana-explorer-visuals-plot');
|
||||
const closestPlotRef = this.plotRefs.find(({ref, messageId, signalUid}) =>
|
||||
!(messageId === draggingGraph.messageId
|
||||
&& signalUid === draggingGraph.signalUid)
|
||||
&& ref.isEqualNode(closestPlot));
|
||||
if(closestPlotRef) {
|
||||
this.setState({graphToReceiveDrop: closestPlotRef});
|
||||
} else {
|
||||
this.setState({graphToReceiveDrop: null});
|
||||
}
|
||||
}
|
||||
const left = e.clientX - rect.left - dragShift.x;
|
||||
const top = e.clientY - rect.top - dragShift.y;
|
||||
const isDragging =
|
||||
draggingSignal.signalUid === signalUid &&
|
||||
draggingSignal.messageId === messageId;
|
||||
const canReceiveGraphDrop =
|
||||
graphToReceiveDrop &&
|
||||
graphToReceiveDrop.signalUid === signalUid &&
|
||||
graphToReceiveDrop.messageId === messageId;
|
||||
plottedSignals = plottedSignals.map(plottedSignal => {
|
||||
return {
|
||||
messageName: this.props.messages[plottedSignal.messageId].frame.name,
|
||||
...plottedSignal
|
||||
};
|
||||
});
|
||||
const key = plottedSignals.reduce(
|
||||
(key, { messageId, signalUid }) => key + messageId + "_" + signalUid,
|
||||
""
|
||||
);
|
||||
return (
|
||||
<CanGraph
|
||||
onGraphRefAvailable={ref => {
|
||||
this.addCanGraphRef(ref, messageId, signalUid);
|
||||
}}
|
||||
key={key}
|
||||
unplot={this.props.onSignalUnplotPressed}
|
||||
messages={this.props.messages}
|
||||
messageId={messageId}
|
||||
messageName={msg.frame ? msg.frame.name : null}
|
||||
signalSpec={Object.assign(Object.create(signal), signal)}
|
||||
onSegmentChanged={this.props.onSegmentChanged}
|
||||
segment={this.props.segment}
|
||||
data={this.props.graphData[index]}
|
||||
onRelativeTimeClick={this.props.onGraphTimeClick}
|
||||
currentTime={this.props.seekTime}
|
||||
onDragStart={this.onGraphDragStart}
|
||||
onDragEnd={this.onGraphDragEnd}
|
||||
container={this.plotListRef}
|
||||
dragPos={isDragging ? this.state.dragPos : null}
|
||||
canReceiveGraphDrop={canReceiveGraphDrop}
|
||||
plottedSignals={plottedSignals}
|
||||
live={this.props.live}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
this.setState({dragPos: {left, top}});
|
||||
}
|
||||
onPlotListRefReady(ref) {
|
||||
this.plotListRef = ref;
|
||||
}
|
||||
|
||||
onGraphDragEnd() {
|
||||
if(this.state.graphToReceiveDrop !== null) {
|
||||
this.props.mergePlots({fromPlot: this.state.draggingSignal, toPlot: this.state.graphToReceiveDrop});
|
||||
}
|
||||
|
||||
this.setState({draggingSignal: {},
|
||||
dragShift: null,
|
||||
dragPos: null,
|
||||
graphToReceiveDrop: null});
|
||||
}
|
||||
|
||||
addCanGraphRef(ref, messageId, signalUid) {
|
||||
if(ref) {
|
||||
let {plotRefs} = this;
|
||||
plotRefs = plotRefs.filter((ref) => !(ref.messageId === messageId && ref.signalUid === signalUid))
|
||||
.concat([{messageId, signalUid, ref}]);
|
||||
this.plotRefs = plotRefs;
|
||||
}
|
||||
}
|
||||
|
||||
renderSignalPlot(plottedSignals, index) {
|
||||
const {draggingSignal, graphToReceiveDrop} = this.state;
|
||||
const {messageId, signalUid} = plottedSignals[0];
|
||||
const msg = this.props.messages[messageId];
|
||||
const signal = Object.values(msg.frame.signals).find((s) => s.uid === signalUid);
|
||||
|
||||
const isDragging = draggingSignal.signalUid === signalUid && draggingSignal.messageId === messageId;
|
||||
const canReceiveGraphDrop = (graphToReceiveDrop
|
||||
&& graphToReceiveDrop.signalUid === signalUid
|
||||
&& graphToReceiveDrop.messageId === messageId);
|
||||
plottedSignals = plottedSignals.map((plottedSignal) => {
|
||||
return {messageName: this.props.messages[plottedSignal.messageId].frame.name,
|
||||
...plottedSignal}
|
||||
});
|
||||
const key = plottedSignals.reduce(
|
||||
(key, {messageId, signalUid}) => key + messageId + '_' + signalUid,
|
||||
'');
|
||||
return (
|
||||
<CanGraph
|
||||
onGraphRefAvailable={(ref) => {this.addCanGraphRef(ref, messageId, signalUid)}}
|
||||
key={key}
|
||||
unplot={this.props.onSignalUnplotPressed}
|
||||
messages={this.props.messages}
|
||||
messageId={messageId}
|
||||
messageName={msg.frame ? msg.frame.name : null}
|
||||
signalSpec={Object.assign(Object.create(signal), signal)}
|
||||
onSegmentChanged={this.props.onSegmentChanged}
|
||||
segment={this.props.segment}
|
||||
data={this.props.graphData[index]}
|
||||
onRelativeTimeClick={this.props.onGraphTimeClick}
|
||||
currentTime={this.props.seekTime}
|
||||
onDragStart={this.onGraphDragStart}
|
||||
onDragEnd={this.onGraphDragEnd}
|
||||
container={this.plotListRef}
|
||||
dragPos={isDragging ? this.state.dragPos : null}
|
||||
canReceiveGraphDrop={canReceiveGraphDrop}
|
||||
plottedSignals={plottedSignals}
|
||||
live={this.props.live}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
onPlotListRefReady(ref) {
|
||||
this.plotListRef = ref;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<div className='cabana-explorer-visuals-plots'
|
||||
ref={this.onPlotListRefReady}
|
||||
onMouseMove={this.onMouseMove}
|
||||
onMouseLeave={this.onGraphDragEnd}
|
||||
onMouseUp={this.onGraphDragEnd}>
|
||||
{this.props.plottedSignals.map(this.renderSignalPlot)}
|
||||
</div>);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className="cabana-explorer-visuals-plots"
|
||||
ref={this.onPlotListRefReady}
|
||||
onMouseMove={this.onMouseMove}
|
||||
onMouseLeave={this.onGraphDragEnd}
|
||||
onMouseUp={this.onGraphDragEnd}
|
||||
>
|
||||
{this.props.plottedSignals.map(this.renderSignalPlot)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,322 +1,370 @@
|
|||
import React, {Component} from 'react';
|
||||
import cx from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import Clipboard from 'clipboard';
|
||||
require('core-js/fn/array/includes');
|
||||
const {ckmeans} = require('simple-statistics');
|
||||
import React, { Component } from "react";
|
||||
import cx from "classnames";
|
||||
import PropTypes from "prop-types";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
import {modifyQueryParameters} from '../utils/url';
|
||||
import MessageBytes from './MessageBytes';
|
||||
import {GITHUB_AUTH_TOKEN_KEY} from '../config';
|
||||
import { modifyQueryParameters } from "../utils/url";
|
||||
import MessageBytes from "./MessageBytes";
|
||||
import { GITHUB_AUTH_TOKEN_KEY } from "../config";
|
||||
require("core-js/fn/array/includes");
|
||||
const { ckmeans } = require("simple-statistics");
|
||||
|
||||
export default class Meta extends Component {
|
||||
static propTypes = {
|
||||
onMessageSelected: PropTypes.func,
|
||||
onMessageUnselected: PropTypes.func,
|
||||
dongleId: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
messages: PropTypes.objectOf(PropTypes.object),
|
||||
selectedMessages: PropTypes.array,
|
||||
onPartChanged: PropTypes.func,
|
||||
partsCount: PropTypes.number,
|
||||
showLoadDbc: PropTypes.func,
|
||||
showSaveDbc: PropTypes.func,
|
||||
dbcFilename: PropTypes.string,
|
||||
dbcLastSaved: PropTypes.object, // moment.js object,
|
||||
showEditMessageModal: PropTypes.func,
|
||||
route: PropTypes.object,
|
||||
partsLoaded: PropTypes.number,
|
||||
currentParts: PropTypes.array,
|
||||
seekTime: PropTypes.number,
|
||||
loginWithGithub: PropTypes.element,
|
||||
isDemo: PropTypes.bool,
|
||||
live: PropTypes.bool,
|
||||
static propTypes = {
|
||||
onMessageSelected: PropTypes.func,
|
||||
onMessageUnselected: PropTypes.func,
|
||||
dongleId: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
messages: PropTypes.objectOf(PropTypes.object),
|
||||
selectedMessages: PropTypes.array,
|
||||
onPartChanged: PropTypes.func,
|
||||
partsCount: PropTypes.number,
|
||||
showLoadDbc: PropTypes.func,
|
||||
showSaveDbc: PropTypes.func,
|
||||
dbcFilename: PropTypes.string,
|
||||
dbcLastSaved: PropTypes.object, // moment.js object,
|
||||
showEditMessageModal: PropTypes.func,
|
||||
route: PropTypes.object,
|
||||
partsLoaded: PropTypes.number,
|
||||
currentParts: PropTypes.array,
|
||||
seekTime: PropTypes.number,
|
||||
loginWithGithub: PropTypes.element,
|
||||
isDemo: PropTypes.bool,
|
||||
live: PropTypes.bool
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { dbcLastSaved } = props;
|
||||
this.state = {
|
||||
filterText: "Filter",
|
||||
lastSaved:
|
||||
dbcLastSaved !== null ? this.props.dbcLastSaved.fromNow() : null,
|
||||
hoveredMessages: [],
|
||||
orderedMessageKeys: []
|
||||
};
|
||||
this.onFilterChanged = this.onFilterChanged.bind(this);
|
||||
this.onFilterFocus = this.onFilterFocus.bind(this);
|
||||
this.onFilterUnfocus = this.onFilterUnfocus.bind(this);
|
||||
this.msgFilter = this.msgFilter.bind(this);
|
||||
this.renderMessageBytes = this.renderMessageBytes.bind(this);
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const {dbcLastSaved} = props;
|
||||
this.state = {
|
||||
filterText: 'Filter',
|
||||
lastSaved: dbcLastSaved !== null ? this.props.dbcLastSaved.fromNow() : null,
|
||||
hoveredMessages: [],
|
||||
orderedMessageKeys: [],
|
||||
};
|
||||
this.onFilterChanged = this.onFilterChanged.bind(this);
|
||||
this.onFilterFocus = this.onFilterFocus.bind(this);
|
||||
this.onFilterUnfocus = this.onFilterUnfocus.bind(this);
|
||||
this.msgFilter = this.msgFilter.bind(this);
|
||||
this.renderMessageBytes = this.renderMessageBytes.bind(this);
|
||||
componentWillMount() {
|
||||
this.lastSavedTimer = setInterval(() => {
|
||||
if (this.props.dbcLastSaved !== null) {
|
||||
this.setState({ lastSaved: this.props.dbcLastSaved.fromNow() });
|
||||
}
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this.lastSavedTimer);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (
|
||||
nextProps.lastSaved !== this.props.lastSaved &&
|
||||
typeof nextProps === "object"
|
||||
) {
|
||||
this.setState({ lastSaved: nextProps.dbcLastSaved.fromNow() });
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.lastSavedTimer = setInterval(() => {
|
||||
if(this.props.dbcLastSaved !== null) {
|
||||
this.setState({lastSaved: this.props.dbcLastSaved.fromNow()})
|
||||
}
|
||||
}, 30000);
|
||||
const nextMsgKeys = Object.keys(nextProps.messages);
|
||||
if (
|
||||
JSON.stringify(nextMsgKeys) !==
|
||||
JSON.stringify(Object.keys(this.props.messages))
|
||||
) {
|
||||
const orderedMessageKeys = this.sortMessages(nextProps.messages);
|
||||
this.setState({ hoveredMessages: [], orderedMessageKeys });
|
||||
} else if (
|
||||
this.state.orderedMessageKeys.length === 0 ||
|
||||
(!this.props.live &&
|
||||
this.props.messages &&
|
||||
nextProps.messages &&
|
||||
this.byteCountsDidUpdate(this.props.messages, nextProps.messages))
|
||||
) {
|
||||
const orderedMessageKeys = this.sortMessages(nextProps.messages);
|
||||
this.setState({ orderedMessageKeys });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this.lastSavedTimer);
|
||||
}
|
||||
byteCountsDidUpdate(prevMessages, nextMessages) {
|
||||
return Object.entries(nextMessages).some(
|
||||
([msgId, msg]) =>
|
||||
JSON.stringify(msg.byteStateChangeCounts) !==
|
||||
JSON.stringify(prevMessages[msgId].byteStateChangeCounts)
|
||||
);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if(nextProps.lastSaved !== this.props.lastSaved && typeof nextProps === 'object') {
|
||||
this.setState({lastSaved: nextProps.dbcLastSaved.fromNow()})
|
||||
sortMessages(messages) {
|
||||
// Returns list of message keys, ordered as follows:
|
||||
// messages are binned into at most 10 bins based on entry count
|
||||
// each bin is sorted by message CAN address
|
||||
// then the list of bins is flattened and reversed to
|
||||
// yield a count-descending, address-ascending order.
|
||||
|
||||
if (Object.keys(messages).length === 0) return [];
|
||||
const messagesByEntryCount = Object.entries(messages).reduce(
|
||||
(partialMapping, [msgId, msg]) => {
|
||||
const entryCountKey = msg.entries.length.toString(); // js object keys are strings
|
||||
if (!partialMapping[entryCountKey]) {
|
||||
partialMapping[entryCountKey] = [msg];
|
||||
} else {
|
||||
partialMapping[entryCountKey].push(msg);
|
||||
}
|
||||
return partialMapping;
|
||||
},
|
||||
{}
|
||||
);
|
||||
|
||||
const nextMsgKeys = Object.keys(nextProps.messages);
|
||||
if(JSON.stringify(nextMsgKeys) !== JSON.stringify(Object.keys(this.props.messages))) {
|
||||
const orderedMessageKeys = this.sortMessages(nextProps.messages);
|
||||
this.setState({hoveredMessages: [], orderedMessageKeys});
|
||||
} else if((this.state.orderedMessageKeys.length === 0)
|
||||
|| (!this.props.live && this.props.messages && nextProps.messages
|
||||
&& this.byteCountsDidUpdate(this.props.messages, nextProps.messages))) {
|
||||
const orderedMessageKeys = this.sortMessages(nextProps.messages);
|
||||
this.setState({orderedMessageKeys});
|
||||
}
|
||||
}
|
||||
|
||||
byteCountsDidUpdate(prevMessages, nextMessages) {
|
||||
return Object.entries(nextMessages).some(([msgId, msg]) =>
|
||||
JSON.stringify(msg.byteStateChangeCounts)
|
||||
!== JSON.stringify(prevMessages[msgId].byteStateChangeCounts));
|
||||
}
|
||||
|
||||
sortMessages(messages) {
|
||||
// Returns list of message keys, ordered as follows:
|
||||
// messages are binned into at most 10 bins based on entry count
|
||||
// each bin is sorted by message CAN address
|
||||
// then the list of bins is flattened and reversed to
|
||||
// yield a count-descending, address-ascending order.
|
||||
|
||||
if(Object.keys(messages).length === 0) return [];
|
||||
const messagesByEntryCount = Object.entries(messages).reduce((partialMapping, [msgId, msg]) => {
|
||||
const entryCountKey = msg.entries.length.toString(); // js object keys are strings
|
||||
if( !partialMapping[entryCountKey] ) {
|
||||
partialMapping[entryCountKey] = [msg];
|
||||
const entryCounts = Object.keys(messagesByEntryCount).map(count =>
|
||||
parseInt(count, 10)
|
||||
);
|
||||
const binnedEntryCounts = ckmeans(
|
||||
entryCounts,
|
||||
Math.min(entryCounts.length, 10)
|
||||
);
|
||||
const sortedKeys = binnedEntryCounts
|
||||
.map(bin =>
|
||||
bin
|
||||
.map(entryCount => messagesByEntryCount[entryCount.toString()])
|
||||
.reduce((messages, partial) => messages.concat(partial), [])
|
||||
.sort((msg1, msg2) => {
|
||||
if (msg1.address < msg2.address) {
|
||||
return 1;
|
||||
} else {
|
||||
partialMapping[entryCountKey].push(msg);
|
||||
return -1;
|
||||
}
|
||||
return partialMapping;
|
||||
}, {});
|
||||
})
|
||||
.map(msg => msg.id)
|
||||
)
|
||||
.reduce((keys, bin) => keys.concat(bin), [])
|
||||
.reverse();
|
||||
|
||||
const entryCounts = Object.keys(messagesByEntryCount).map((count) => parseInt(count, 10));
|
||||
const binnedEntryCounts = ckmeans(entryCounts, Math.min(entryCounts.length, 10));
|
||||
const sortedKeys = binnedEntryCounts.map((bin) =>
|
||||
bin.map((entryCount) => messagesByEntryCount[entryCount.toString()])
|
||||
.reduce((messages, partial) => messages.concat(partial), [])
|
||||
.sort((msg1, msg2) => {
|
||||
if(msg1.address < msg2.address) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
})
|
||||
.map((msg) => msg.id)
|
||||
).reduce((keys, bin) => keys.concat(bin), [])
|
||||
.reverse();
|
||||
return sortedKeys;
|
||||
}
|
||||
|
||||
return sortedKeys;
|
||||
onFilterChanged(e) {
|
||||
let val = e.target.value;
|
||||
if (val.trim() === "Filter") val = "";
|
||||
|
||||
this.setState({ filterText: val });
|
||||
}
|
||||
|
||||
onFilterFocus(e) {
|
||||
if (this.state.filterText.trim() === "Filter") {
|
||||
this.setState({ filterText: "" });
|
||||
}
|
||||
}
|
||||
|
||||
onFilterChanged(e) {
|
||||
let val = e.target.value;
|
||||
if(val.trim() === 'Filter') val = '';
|
||||
|
||||
this.setState({filterText: val})
|
||||
onFilterUnfocus(e) {
|
||||
if (this.state.filterText.trim() === "") {
|
||||
this.setState({ filterText: "Filter" });
|
||||
}
|
||||
}
|
||||
|
||||
onFilterFocus(e) {
|
||||
if(this.state.filterText.trim() === 'Filter') {
|
||||
this.setState({filterText: ''})
|
||||
}
|
||||
msgFilter(msg) {
|
||||
const { filterText } = this.state;
|
||||
const msgName = msg.frame ? msg.frame.name : "";
|
||||
|
||||
return (
|
||||
filterText === "Filter" ||
|
||||
filterText === "" ||
|
||||
msg.id.toLowerCase().indexOf(filterText.toLowerCase()) !== -1 ||
|
||||
msgName.toLowerCase().indexOf(filterText.toLowerCase()) !== -1
|
||||
);
|
||||
}
|
||||
|
||||
lastSavedPretty() {
|
||||
const { dbcLastSaved } = this.props;
|
||||
return dbcLastSaved.fromNow();
|
||||
}
|
||||
|
||||
onMessageHover(key) {
|
||||
let { hoveredMessages } = this.state;
|
||||
if (hoveredMessages.indexOf(key) !== -1) return;
|
||||
|
||||
hoveredMessages.push(key);
|
||||
this.setState({ hoveredMessages });
|
||||
}
|
||||
|
||||
onMessageHoverEnd(key) {
|
||||
let { hoveredMessages } = this.state;
|
||||
hoveredMessages = hoveredMessages.filter(m => m !== key);
|
||||
this.setState({ hoveredMessages });
|
||||
}
|
||||
|
||||
onMsgRemoveClick(key) {
|
||||
let { selectedMessages } = this.state;
|
||||
selectedMessages = selectedMessages.filter(m => m !== key);
|
||||
this.props.onMessageUnselected(key);
|
||||
this.setState({ selectedMessages });
|
||||
}
|
||||
|
||||
onMessageSelected(key) {
|
||||
// uncomment when we support multiple messages
|
||||
// const selectedMessages = this.state.selectedMessages.filter((m) => m !== key);
|
||||
const selectedMessages = [];
|
||||
selectedMessages.push(key);
|
||||
this.props.updateSelectedMessages(selectedMessages);
|
||||
this.props.onMessageSelected(key);
|
||||
}
|
||||
|
||||
orderedMessages() {
|
||||
const { orderedMessageKeys } = this.state;
|
||||
const { messages } = this.props;
|
||||
return orderedMessageKeys.map(key => messages[key]);
|
||||
}
|
||||
|
||||
selectedMessageClass(messageId) {
|
||||
return this.props.selectedMessages.includes(messageId)
|
||||
? "is-selected"
|
||||
: null;
|
||||
}
|
||||
|
||||
renderMessageBytes(msg) {
|
||||
return (
|
||||
<tr
|
||||
onClick={() => {
|
||||
this.onMessageSelected(msg.id);
|
||||
}}
|
||||
key={msg.id}
|
||||
className={cx(
|
||||
"cabana-meta-messages-list-item",
|
||||
this.selectedMessageClass(msg.id)
|
||||
)}
|
||||
>
|
||||
<td>{msg.frame ? msg.frame.name : "undefined"}</td>
|
||||
<td>{msg.id}</td>
|
||||
<td>{msg.entries.length}</td>
|
||||
<td>
|
||||
<div className="cabana-meta-messages-list-item-bytes">
|
||||
<MessageBytes
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
seekIndex={this.props.seekIndex}
|
||||
seekTime={this.props.seekTime}
|
||||
live={this.props.live}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
renderMessages() {
|
||||
return this.orderedMessages()
|
||||
.filter(this.msgFilter)
|
||||
.map(this.renderMessageBytes);
|
||||
}
|
||||
|
||||
renderAvailableMessagesList() {
|
||||
if (Object.keys(this.props.messages).length === 0) {
|
||||
return <p>Loading messages...</p>;
|
||||
}
|
||||
return (
|
||||
<table cellPadding="5">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>ID</td>
|
||||
<td>Count</td>
|
||||
<td>Bytes</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{this.renderMessages()}</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
onFilterUnfocus(e) {
|
||||
if(this.state.filterText.trim() === '') {
|
||||
this.setState({filterText: 'Filter'})
|
||||
}
|
||||
shareUrl() {
|
||||
const add = {
|
||||
max: this.props.route.proclog,
|
||||
url: this.props.route.url
|
||||
};
|
||||
const remove = [GITHUB_AUTH_TOKEN_KEY]; // don't share github access
|
||||
const shareUrl = modifyQueryParameters({ add, remove });
|
||||
|
||||
return shareUrl;
|
||||
}
|
||||
|
||||
saveable() {
|
||||
try {
|
||||
"serviceWorker" in navigator &&
|
||||
!!new ReadableStream() &&
|
||||
!!new WritableStream(); // eslint-disable-line no-undef
|
||||
return "saveable";
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
msgFilter(msg) {
|
||||
const {filterText} = this.state;
|
||||
const msgName = (msg.frame ? msg.frame.name : '');
|
||||
|
||||
return (filterText === 'Filter'
|
||||
|| filterText === ''
|
||||
|| msg.id.toLowerCase().indexOf(filterText.toLowerCase()) !== -1
|
||||
|| msgName.toLowerCase().indexOf(filterText.toLowerCase()) !== -1);
|
||||
}
|
||||
|
||||
lastSavedPretty() {
|
||||
const {dbcLastSaved} = this.props;
|
||||
return dbcLastSaved.fromNow();
|
||||
}
|
||||
|
||||
onMessageHover(key) {
|
||||
let {hoveredMessages} = this.state;
|
||||
if(hoveredMessages.indexOf(key) !== -1) return;
|
||||
|
||||
hoveredMessages.push(key);
|
||||
this.setState({hoveredMessages});
|
||||
}
|
||||
|
||||
onMessageHoverEnd(key) {
|
||||
let {hoveredMessages} = this.state;
|
||||
hoveredMessages = hoveredMessages.filter((m) => m !== key);
|
||||
this.setState({hoveredMessages});
|
||||
}
|
||||
|
||||
onMsgRemoveClick(key) {
|
||||
let {selectedMessages} = this.state;
|
||||
selectedMessages = selectedMessages.filter((m) => m !== key);
|
||||
this.props.onMessageUnselected(key);
|
||||
this.setState({selectedMessages});
|
||||
}
|
||||
|
||||
onMessageSelected(key) {
|
||||
// uncomment when we support multiple messages
|
||||
// const selectedMessages = this.state.selectedMessages.filter((m) => m !== key);
|
||||
const selectedMessages = [];
|
||||
selectedMessages.push(key);
|
||||
this.props.updateSelectedMessages(selectedMessages);
|
||||
this.props.onMessageSelected(key);
|
||||
}
|
||||
|
||||
orderedMessages() {
|
||||
const {orderedMessageKeys} = this.state;
|
||||
const {messages} = this.props;
|
||||
return orderedMessageKeys.map((key) => messages[key]);
|
||||
}
|
||||
|
||||
selectedMessageClass(messageId) {
|
||||
return (this.props.selectedMessages.includes(messageId) ? 'is-selected' : null);
|
||||
}
|
||||
|
||||
renderMessageBytes(msg) {
|
||||
return (
|
||||
<tr onClick={() => {this.onMessageSelected(msg.id)}}
|
||||
key={msg.id}
|
||||
className={cx('cabana-meta-messages-list-item', this.selectedMessageClass(msg.id))}>
|
||||
<td>{msg.frame ? msg.frame.name : 'undefined'}</td>
|
||||
<td>{msg.id}</td>
|
||||
<td>{msg.entries.length}</td>
|
||||
<td>
|
||||
<div className='cabana-meta-messages-list-item-bytes'>
|
||||
<MessageBytes
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
seekIndex={this.props.seekIndex}
|
||||
seekTime={this.props.seekTime}
|
||||
live={this.props.live}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
renderMessages() {
|
||||
return this.orderedMessages()
|
||||
.filter(this.msgFilter)
|
||||
.map(this.renderMessageBytes);
|
||||
}
|
||||
|
||||
renderAvailableMessagesList() {
|
||||
if(Object.keys(this.props.messages).length === 0) {
|
||||
return <p>Loading messages...</p>;
|
||||
}
|
||||
return (
|
||||
<table cellPadding='5'>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>ID</td>
|
||||
<td>Count</td>
|
||||
<td>Bytes</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.renderMessages()}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
shareUrl() {
|
||||
const add = {
|
||||
max: this.props.route.proclog,
|
||||
url: this.props.route.url,
|
||||
};
|
||||
const remove = [GITHUB_AUTH_TOKEN_KEY]; // don't share github access
|
||||
const shareUrl = modifyQueryParameters({ add, remove })
|
||||
|
||||
return shareUrl;
|
||||
}
|
||||
|
||||
saveable() {
|
||||
try {
|
||||
'serviceWorker' in navigator && !!new ReadableStream() && !!new WritableStream()
|
||||
return 'saveable';
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className='cabana-meta'>
|
||||
<div className='cabana-meta-header'>
|
||||
<h5 className='cabana-meta-header-label t-capline'>Currently editing:</h5>
|
||||
<strong className='cabana-meta-header-filename'>{this.props.dbcFilename}</strong>
|
||||
{this.props.dbcLastSaved !== null ?
|
||||
<div className='cabana-meta-header-last-saved'>
|
||||
<p>Last saved: {this.lastSavedPretty()}</p>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div className={`cabana-meta-header-actions ${this.saveable()}`}>
|
||||
<div className='cabana-meta-header-action'>
|
||||
<button onClick={this.props.showLoadDbc}>Load DBC</button>
|
||||
</div>
|
||||
{this.saveable() && <div className='cabana-meta-header-action'>
|
||||
<button onClick={this.props.saveLog}>Save Log</button>
|
||||
</div>
|
||||
}
|
||||
{this.props.route ?
|
||||
<div className='cabana-meta-header-action special-wide'
|
||||
data-clipboard-text={this.shareUrl()}
|
||||
data-clipboard-action='copy'
|
||||
ref={(ref) => ref ? new Clipboard(ref) : null}>
|
||||
<a className='button'
|
||||
href={this.shareUrl()}
|
||||
onClick={(e) => e.preventDefault()}>Copy Share Link</a>
|
||||
</div> : null}
|
||||
<div className='cabana-meta-header-action'>
|
||||
<button onClick={this.props.showSaveDbc}>Save DBC</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='cabana-meta-messages'>
|
||||
<div className='cabana-meta-messages-header'>
|
||||
<h5 className='t-capline'>Available messages</h5>
|
||||
</div>
|
||||
<div className='cabana-meta-messages-window'>
|
||||
<div className='cabana-meta-messages-filter'>
|
||||
<div className='form-field form-field--small'>
|
||||
<input type="text"
|
||||
value={this.state.filterText}
|
||||
onFocus={this.onFilterFocus}
|
||||
onBlur={this.onFilterUnfocus}
|
||||
onChange={this.onFilterChanged} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='cabana-meta-messages-list'>
|
||||
{this.renderAvailableMessagesList()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="cabana-meta">
|
||||
<div className="cabana-meta-header">
|
||||
<h5 className="cabana-meta-header-label t-capline">
|
||||
Currently editing:
|
||||
</h5>
|
||||
<strong className="cabana-meta-header-filename">
|
||||
{this.props.dbcFilename}
|
||||
</strong>
|
||||
{this.props.dbcLastSaved !== null ? (
|
||||
<div className="cabana-meta-header-last-saved">
|
||||
<p>Last saved: {this.lastSavedPretty()}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
) : null}
|
||||
<div className={`cabana-meta-header-actions ${this.saveable()}`}>
|
||||
<div className="cabana-meta-header-action">
|
||||
<button onClick={this.props.showLoadDbc}>Load DBC</button>
|
||||
</div>
|
||||
{this.saveable() && (
|
||||
<div className="cabana-meta-header-action">
|
||||
<button onClick={this.props.saveLog}>Save Log</button>
|
||||
</div>
|
||||
)}
|
||||
{this.props.route ? (
|
||||
<div
|
||||
className="cabana-meta-header-action special-wide"
|
||||
data-clipboard-text={this.shareUrl()}
|
||||
data-clipboard-action="copy"
|
||||
ref={ref => (ref ? new Clipboard(ref) : null)}
|
||||
>
|
||||
<a
|
||||
className="button"
|
||||
href={this.shareUrl()}
|
||||
onClick={e => e.preventDefault()}
|
||||
>
|
||||
Copy Share Link
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="cabana-meta-header-action">
|
||||
<button onClick={this.props.showSaveDbc}>Save DBC</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cabana-meta-messages">
|
||||
<div className="cabana-meta-messages-header">
|
||||
<h5 className="t-capline">Available messages</h5>
|
||||
</div>
|
||||
<div className="cabana-meta-messages-window">
|
||||
<div className="cabana-meta-messages-filter">
|
||||
<div className="form-field form-field--small">
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.filterText}
|
||||
onFocus={this.onFilterFocus}
|
||||
onBlur={this.onFilterUnfocus}
|
||||
onChange={this.onFilterChanged}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cabana-meta-messages-list">
|
||||
{this.renderAvailableMessagesList()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,86 @@
|
|||
// SignalLegend.js
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
require('core-js/fn/array/includes');
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import SignalLegendEntry from './SignalLegendEntry';
|
||||
import SignalLegendEntry from "./SignalLegendEntry";
|
||||
require("core-js/fn/array/includes");
|
||||
|
||||
export default class SignalLegend extends Component {
|
||||
static propTypes = {
|
||||
signals: PropTypes.object,
|
||||
signalStyles: PropTypes.object,
|
||||
highlightedSignal: PropTypes.string,
|
||||
onSignalHover: PropTypes.func,
|
||||
onSignalHoverEnd: PropTypes.func,
|
||||
onTentativeSignalChange: PropTypes.func,
|
||||
onSignalChange: PropTypes.func,
|
||||
onSignalRemove: PropTypes.func,
|
||||
onSignalPlotChange: PropTypes.func,
|
||||
plottedSignalUids: PropTypes.array
|
||||
static propTypes = {
|
||||
signals: PropTypes.object,
|
||||
signalStyles: PropTypes.object,
|
||||
highlightedSignal: PropTypes.string,
|
||||
onSignalHover: PropTypes.func,
|
||||
onSignalHoverEnd: PropTypes.func,
|
||||
onTentativeSignalChange: PropTypes.func,
|
||||
onSignalChange: PropTypes.func,
|
||||
onSignalRemove: PropTypes.func,
|
||||
onSignalPlotChange: PropTypes.func,
|
||||
plottedSignalUids: PropTypes.array
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expandedSignals: []
|
||||
};
|
||||
this.toggleExpandSignal = this.toggleExpandSignal.bind(this);
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expandedSignals: [],
|
||||
toggleExpandSignal(s) {
|
||||
const { expandedSignals } = this.state;
|
||||
if (!expandedSignals.includes(s.uid)) {
|
||||
const updatedExpandedSignals = [...expandedSignals, s.uid];
|
||||
this.setState({ expandedSignals: updatedExpandedSignals });
|
||||
} else {
|
||||
const updatedExpandedSignals = expandedSignals.filter(i => i !== s.uid);
|
||||
this.setState({ expandedSignals: updatedExpandedSignals });
|
||||
}
|
||||
}
|
||||
|
||||
checkExpandedSignal(s) {
|
||||
return this.state.expandedSignals.includes(s);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { signals, highlightedSignal } = this.props;
|
||||
const signalRowsNested = Object.entries(signals)
|
||||
.sort(([_, signal1], [__, signal2]) => {
|
||||
if (signal1.startBit < signal2.startBit) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
this.toggleExpandSignal = this.toggleExpandSignal.bind(this);
|
||||
}
|
||||
|
||||
toggleExpandSignal(s) {
|
||||
const {expandedSignals} = this.state;
|
||||
if (!expandedSignals.includes(s.uid)) {
|
||||
const updatedExpandedSignals = [...expandedSignals, s.uid];
|
||||
this.setState({expandedSignals: updatedExpandedSignals})
|
||||
} else {
|
||||
const updatedExpandedSignals = expandedSignals.filter((i) => i !== s.uid)
|
||||
this.setState({expandedSignals: updatedExpandedSignals});
|
||||
}
|
||||
}
|
||||
|
||||
checkExpandedSignal(s) {
|
||||
return this.state.expandedSignals.includes(s);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {signals, highlightedSignal} = this.props;
|
||||
const signalRowsNested = Object.entries(signals)
|
||||
.sort(([_, signal1], [__, signal2]) => {
|
||||
if(signal1.startBit < signal2.startBit) {
|
||||
return -1;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
})
|
||||
.map(([signalName, signal]) => {
|
||||
const { colors } = signals[signalName];
|
||||
const isHighlighted = highlightedSignal === signalName;
|
||||
|
||||
return <SignalLegendEntry
|
||||
key={signal.uid}
|
||||
signal={signal}
|
||||
isHighlighted={isHighlighted}
|
||||
color={colors}
|
||||
onSignalHover={this.props.onSignalHover}
|
||||
onSignalHoverEnd={this.props.onSignalHoverEnd}
|
||||
onTentativeSignalChange={this.props.onTentativeSignalChange}
|
||||
onSignalChange={this.props.onSignalChange}
|
||||
onSignalRemove={this.props.onSignalRemove}
|
||||
onSignalPlotChange={this.props.onSignalPlotChange}
|
||||
toggleExpandSignal={this.toggleExpandSignal}
|
||||
isPlotted={this.props.plottedSignalUids.indexOf(signal.uid) !== -1}
|
||||
isExpanded={this.checkExpandedSignal(signal.uid)}/>;
|
||||
});
|
||||
|
||||
const signalRows = signalRowsNested
|
||||
.filter((row) => row != null)
|
||||
.reduce((a, b) => {
|
||||
return a.concat(b)
|
||||
}, []);
|
||||
})
|
||||
.map(([signalName, signal]) => {
|
||||
const { colors } = signals[signalName];
|
||||
const isHighlighted = highlightedSignal === signalName;
|
||||
|
||||
return (
|
||||
<div className='cabana-explorer-signals-legend'>
|
||||
{signalRows}
|
||||
</div>
|
||||
<SignalLegendEntry
|
||||
key={signal.uid}
|
||||
signal={signal}
|
||||
isHighlighted={isHighlighted}
|
||||
color={colors}
|
||||
onSignalHover={this.props.onSignalHover}
|
||||
onSignalHoverEnd={this.props.onSignalHoverEnd}
|
||||
onTentativeSignalChange={this.props.onTentativeSignalChange}
|
||||
onSignalChange={this.props.onSignalChange}
|
||||
onSignalRemove={this.props.onSignalRemove}
|
||||
onSignalPlotChange={this.props.onSignalPlotChange}
|
||||
toggleExpandSignal={this.toggleExpandSignal}
|
||||
isPlotted={this.props.plottedSignalUids.indexOf(signal.uid) !== -1}
|
||||
isExpanded={this.checkExpandedSignal(signal.uid)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const signalRows = signalRowsNested
|
||||
.filter(row => row != null)
|
||||
.reduce((a, b) => {
|
||||
return a.concat(b);
|
||||
}, []);
|
||||
|
||||
return <div className="cabana-explorer-signals-legend">{signalRows}</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
88
src/index.js
88
src/index.js
|
|
@ -1,43 +1,47 @@
|
|||
import Sentry from './logging/Sentry';
|
||||
import Sentry from "./logging/Sentry";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import CanExplorer from "./CanExplorer";
|
||||
import AcuraDbc from "./acura-dbc";
|
||||
import { getUrlParameter, modifyQueryParameters } from "./utils/url";
|
||||
import { GITHUB_AUTH_TOKEN_KEY } from "./config";
|
||||
import {
|
||||
fetchPersistedDbc,
|
||||
fetchPersistedGithubAuthToken,
|
||||
persistGithubAuthToken
|
||||
} from "./api/localstorage";
|
||||
import "./index.css";
|
||||
|
||||
Sentry.init();
|
||||
require("core-js/fn/object/entries");
|
||||
require("core-js/fn/object/values");
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import CanExplorer from './CanExplorer';
|
||||
import AcuraDbc from './acura-dbc';
|
||||
import {getUrlParameter, modifyQueryParameters} from './utils/url';
|
||||
import {GITHUB_AUTH_TOKEN_KEY} from './config';
|
||||
import {fetchPersistedDbc,
|
||||
fetchPersistedGithubAuthToken,
|
||||
persistGithubAuthToken} from './api/localstorage';
|
||||
require('core-js/fn/object/entries');
|
||||
require('core-js/fn/object/values');
|
||||
import './index.css';
|
||||
|
||||
const routeFullName = getUrlParameter('route');
|
||||
const routeFullName = getUrlParameter("route");
|
||||
let isDemo = !routeFullName;
|
||||
let props = {autoplay: true, isDemo};
|
||||
let props = { autoplay: true, isDemo };
|
||||
let persistedDbc = null;
|
||||
|
||||
if (routeFullName) {
|
||||
const [dongleId, route] = routeFullName.split('|');
|
||||
props.dongleId = dongleId;
|
||||
props.name = route;
|
||||
const [dongleId, route] = routeFullName.split("|");
|
||||
props.dongleId = dongleId;
|
||||
props.name = route;
|
||||
|
||||
persistedDbc = fetchPersistedDbc(routeFullName);
|
||||
persistedDbc = fetchPersistedDbc(routeFullName);
|
||||
|
||||
let max = getUrlParameter('max'), url = getUrlParameter('url');
|
||||
if(max && url) {
|
||||
props.max = max;
|
||||
props.url = url;
|
||||
}
|
||||
} else if(getUrlParameter('demo')) {
|
||||
let max = getUrlParameter("max"),
|
||||
url = getUrlParameter("url");
|
||||
if (max && url) {
|
||||
props.max = max;
|
||||
props.url = url;
|
||||
}
|
||||
} else if (getUrlParameter("demo")) {
|
||||
props.max = 12;
|
||||
props.url = 'https://chffrprivate.blob.core.windows.net/chffrprivate3/v2/cb38263377b873ee/78392b99580c5920227cc5b43dff8a70_2017-06-12--18-51-47';
|
||||
props.name = '2017-06-12--18-51-47';
|
||||
props.dongleId = 'cb38263377b873ee';
|
||||
props.url =
|
||||
"https://chffrprivate.blob.core.windows.net/chffrprivate3/v2/cb38263377b873ee/78392b99580c5920227cc5b43dff8a70_2017-06-12--18-51-47";
|
||||
props.name = "2017-06-12--18-51-47";
|
||||
props.dongleId = "cb38263377b873ee";
|
||||
props.dbc = AcuraDbc;
|
||||
props.dbcFilename = 'acura_ilx_2016_can.dbc';
|
||||
props.dbcFilename = "acura_ilx_2016_can.dbc";
|
||||
|
||||
// lots of 404s on this one
|
||||
// props.max = 752;
|
||||
|
|
@ -57,7 +61,7 @@ if (routeFullName) {
|
|||
}
|
||||
|
||||
if (persistedDbc) {
|
||||
const {dbcFilename, dbc} = persistedDbc;
|
||||
const { dbcFilename, dbc } = persistedDbc;
|
||||
props.dbc = dbc;
|
||||
props.dbcFilename = dbcFilename;
|
||||
}
|
||||
|
|
@ -66,24 +70,22 @@ const authTokenQueryParam = getUrlParameter(GITHUB_AUTH_TOKEN_KEY);
|
|||
if (authTokenQueryParam !== null) {
|
||||
props.githubAuthToken = authTokenQueryParam;
|
||||
persistGithubAuthToken(authTokenQueryParam);
|
||||
const urlNoAuthToken = modifyQueryParameters({remove: [GITHUB_AUTH_TOKEN_KEY]});
|
||||
const urlNoAuthToken = modifyQueryParameters({
|
||||
remove: [GITHUB_AUTH_TOKEN_KEY]
|
||||
});
|
||||
window.location.href = urlNoAuthToken;
|
||||
} else {
|
||||
props.githubAuthToken = fetchPersistedGithubAuthToken();
|
||||
}
|
||||
|
||||
if (routeFullName || isDemo) {
|
||||
ReactDOM.render(
|
||||
<CanExplorer
|
||||
{...props} />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
ReactDOM.render(<CanExplorer {...props} />, document.getElementById("root"));
|
||||
} else {
|
||||
const img = document.createElement('img');
|
||||
img.src = process.env.PUBLIC_URL + '/img/cabana.jpg';
|
||||
img.style.width = '100%';
|
||||
const comment = document.createComment('7/6/17');
|
||||
const img = document.createElement("img");
|
||||
img.src = process.env.PUBLIC_URL + "/img/cabana.jpg";
|
||||
img.style.width = "100%";
|
||||
const comment = document.createComment("7/6/17");
|
||||
|
||||
document.getElementById('root').appendChild(img);
|
||||
document.getElementById('root').appendChild(comment);
|
||||
document.getElementById("root").appendChild(img);
|
||||
document.getElementById("root").appendChild(comment);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// Vendored from https://github.com/rapid7/le_js, which is broken with webpack.
|
||||
/* eslint-disable */
|
||||
|
||||
if (typeof window === 'undefined') { // eslint-disable-line no-use-before-define
|
||||
var window = self;
|
||||
|
|
@ -378,4 +379,4 @@ export default {
|
|||
for (var k in loggers)
|
||||
loggers[k].info.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,227 +1,237 @@
|
|||
const UINT64 = require('cuint').UINT64
|
||||
require('core-js/fn/array/from');
|
||||
require('core-js/es6/map');
|
||||
import {hash} from '../../utils/string';
|
||||
import Bitarray from '../bitarray';
|
||||
import { hash } from "../../utils/string";
|
||||
import Bitarray from "../bitarray";
|
||||
|
||||
import DbcUtils from '../../utils/dbc';
|
||||
import DbcUtils from "../../utils/dbc";
|
||||
|
||||
const UINT64 = require("cuint").UINT64;
|
||||
require("core-js/fn/array/from");
|
||||
require("core-js/es6/map");
|
||||
|
||||
export default class Signal {
|
||||
constructor({name,
|
||||
startBit = 0,
|
||||
size = 0,
|
||||
isLittleEndian = true,
|
||||
isSigned = false,
|
||||
isFloat = false,
|
||||
factor = 1,
|
||||
offset = 0,
|
||||
unit = "",
|
||||
receiver = ['XXX'],
|
||||
comment = null,
|
||||
multiplex = null,
|
||||
min = null,
|
||||
max = null,
|
||||
valueDescriptions = new Map()
|
||||
}) {
|
||||
Object.assign(this,
|
||||
{name,
|
||||
startBit,
|
||||
size,
|
||||
isLittleEndian,
|
||||
isSigned,
|
||||
isFloat,
|
||||
factor,
|
||||
offset,
|
||||
unit,
|
||||
receiver,
|
||||
comment,
|
||||
multiplex,
|
||||
valueDescriptions});
|
||||
constructor({
|
||||
name,
|
||||
startBit = 0,
|
||||
size = 0,
|
||||
isLittleEndian = true,
|
||||
isSigned = false,
|
||||
isFloat = false,
|
||||
factor = 1,
|
||||
offset = 0,
|
||||
unit = "",
|
||||
receiver = ["XXX"],
|
||||
comment = null,
|
||||
multiplex = null,
|
||||
min = null,
|
||||
max = null,
|
||||
valueDescriptions = new Map()
|
||||
}) {
|
||||
Object.assign(this, {
|
||||
name,
|
||||
startBit,
|
||||
size,
|
||||
isLittleEndian,
|
||||
isSigned,
|
||||
isFloat,
|
||||
factor,
|
||||
offset,
|
||||
unit,
|
||||
receiver,
|
||||
comment,
|
||||
multiplex,
|
||||
valueDescriptions
|
||||
});
|
||||
|
||||
const uid = Math.random().toString(36);
|
||||
const uid = Math.random().toString(36);
|
||||
|
||||
if(min == null) {
|
||||
min = this.calculateMin();
|
||||
}
|
||||
if(max == null) {
|
||||
max = this.calculateMax();
|
||||
}
|
||||
|
||||
const colors = this.generateColors();
|
||||
|
||||
Object.assign(this, {min, max, uid, colors});
|
||||
if (min == null) {
|
||||
min = this.calculateMin();
|
||||
}
|
||||
if (max == null) {
|
||||
max = this.calculateMax();
|
||||
}
|
||||
|
||||
text() {
|
||||
const multiplex = this.multiplex ? ' ' + this.multiplex : '';
|
||||
const byteOrder = this.isLittleEndian ? 1 : 0;
|
||||
const signedChar = this.isSigned ? '-' : '+';
|
||||
const colors = this.generateColors();
|
||||
|
||||
return `SG_ ${this.name}${multiplex} : ` +
|
||||
`${this.startBit}|${this.size}@${byteOrder}${signedChar}` +
|
||||
` (${this.factor},${this.offset})` +
|
||||
` [${this.min}|${this.max}]` +
|
||||
` "${this.unit}" ${this.receiver}`
|
||||
Object.assign(this, { min, max, uid, colors });
|
||||
}
|
||||
|
||||
text() {
|
||||
const multiplex = this.multiplex ? " " + this.multiplex : "";
|
||||
const byteOrder = this.isLittleEndian ? 1 : 0;
|
||||
const signedChar = this.isSigned ? "-" : "+";
|
||||
|
||||
return (
|
||||
`SG_ ${this.name}${multiplex} : ` +
|
||||
`${this.startBit}|${this.size}@${byteOrder}${signedChar}` +
|
||||
` (${this.factor},${this.offset})` +
|
||||
` [${this.min}|${this.max}]` +
|
||||
` "${this.unit}" ${this.receiver}`
|
||||
);
|
||||
}
|
||||
|
||||
valueDescriptionText(msgId) {
|
||||
const entryPairs = Array.from(this.valueDescriptions.entries());
|
||||
const values = entryPairs.reduce(
|
||||
(str, [value, desc]) => str + value + ` "${desc}" `,
|
||||
""
|
||||
);
|
||||
return `VAL_ ${msgId} ${this.name} ${values};`;
|
||||
}
|
||||
|
||||
lsbBitIndex() {
|
||||
// Returns LSB bit index in matrix order (see AddSignals.js)
|
||||
|
||||
if (this.isLittleEndian) {
|
||||
return this.startBit;
|
||||
} else {
|
||||
const lsbBitNumber = this.lsbBitNumber();
|
||||
|
||||
return DbcUtils.matrixBitNumber(lsbBitNumber);
|
||||
}
|
||||
}
|
||||
|
||||
lsbBitNumber() {
|
||||
// Returns LSB bit number in big endian ordering
|
||||
|
||||
return DbcUtils.bigEndianBitIndex(this.startBit) + this.size - 1;
|
||||
}
|
||||
|
||||
msbBitIndex() {
|
||||
if (this.isLittleEndian) {
|
||||
return this.startBit + this.size - 1;
|
||||
} else {
|
||||
return this.startBit;
|
||||
}
|
||||
}
|
||||
|
||||
littleEndianBitDescription(bitIndex) {
|
||||
const bitRange = [this.startBit, this.startBit + this.size - 1];
|
||||
if (bitIndex < bitRange[0] || bitIndex > bitRange[1]) {
|
||||
return null;
|
||||
} else {
|
||||
const bitNumber = bitIndex - bitRange[0];
|
||||
const isLsb = bitIndex === bitRange[0];
|
||||
const isMsb = bitIndex === bitRange[1];
|
||||
return { bitNumber, isLsb, isMsb };
|
||||
}
|
||||
}
|
||||
|
||||
bigEndianBitDescription(bitIndex) {
|
||||
const start = DbcUtils.bigEndianBitIndex(this.startBit);
|
||||
const range = [start, start + this.size - 1];
|
||||
const bitNumber = DbcUtils.bigEndianBitIndex(bitIndex);
|
||||
|
||||
if (bitNumber < range[0] || bitNumber > range[1]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
valueDescriptionText(msgId) {
|
||||
const entryPairs = Array.from(this.valueDescriptions.entries());
|
||||
const values = entryPairs.reduce((str,
|
||||
[value, desc]) => str + value + ` "${desc}" `,
|
||||
'');
|
||||
return `VAL_ ${msgId} ${this.name} ${values};`;
|
||||
const isLsb = bitNumber === range[1];
|
||||
const isMsb = bitIndex === this.startBit;
|
||||
return { bitNumber, isLsb, isMsb, range };
|
||||
}
|
||||
|
||||
bitDescription(bitIndex) {
|
||||
if (this.isLittleEndian) {
|
||||
return this.littleEndianBitDescription(bitIndex);
|
||||
} else {
|
||||
return this.bigEndianBitDescription(bitIndex);
|
||||
}
|
||||
}
|
||||
|
||||
calculateRawRange() {
|
||||
let rawRange = Math.pow(2, this.size);
|
||||
if (this.isSigned) {
|
||||
rawRange /= 2;
|
||||
}
|
||||
return [this.isSigned ? -1 * rawRange : 0, rawRange - 1];
|
||||
}
|
||||
|
||||
calculateMin() {
|
||||
const rawMin = this.calculateRawRange()[0];
|
||||
return this.offset + rawMin * this.factor;
|
||||
}
|
||||
|
||||
calculateMax() {
|
||||
const rawMax = this.calculateRawRange()[1];
|
||||
return this.offset + rawMax * this.factor;
|
||||
}
|
||||
|
||||
valueForInt32Signal(signalSpec, bits, bitsSwapped) {
|
||||
let startBit, bitArr;
|
||||
|
||||
if (signalSpec.isLittleEndian) {
|
||||
bitArr = bitsSwapped;
|
||||
startBit = signalSpec.startBit;
|
||||
} else {
|
||||
bitArr = bits;
|
||||
startBit = DbcUtils.bigEndianBitIndex(signalSpec.startBit);
|
||||
}
|
||||
let ival = Bitarray.extract(bitArr, startBit, signalSpec.size);
|
||||
|
||||
if (signalSpec.isSigned && ival & (1 << (signalSpec.size - 1))) {
|
||||
ival -= 1 << signalSpec.size;
|
||||
}
|
||||
ival = ival * signalSpec.factor + signalSpec.offset;
|
||||
return ival;
|
||||
}
|
||||
|
||||
valueForInt64Signal(signalSpec, hexData) {
|
||||
const blen = hexData.length * 4;
|
||||
let value, startBit, dataBitPos;
|
||||
|
||||
if (signalSpec.isLittleEndian) {
|
||||
// TODO use buffer swap
|
||||
// value = UINT64(swapOrder(hexData, 16, 2), 16);
|
||||
startBit = signalSpec.startBit;
|
||||
dataBitPos = UINT64.fromNumber(startBit);
|
||||
} else {
|
||||
// big endian
|
||||
value = UINT64(hexData, 16);
|
||||
|
||||
startBit = DbcUtils.bigEndianBitIndex(signalSpec.startBit);
|
||||
dataBitPos = UINT64(blen - (startBit + signalSpec.size));
|
||||
}
|
||||
if (dataBitPos < 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
lsbBitIndex() {
|
||||
// Returns LSB bit index in matrix order (see AddSignals.js)
|
||||
let rightHandAnd = UINT64((1 << signalSpec.size) - 1);
|
||||
let ival = value
|
||||
.shiftr(dataBitPos)
|
||||
.and(rightHandAnd)
|
||||
.toNumber();
|
||||
|
||||
if(this.isLittleEndian) {
|
||||
return this.startBit;
|
||||
} else {
|
||||
const lsbBitNumber = this.lsbBitNumber();
|
||||
if (signalSpec.isSigned && ival & (1 << (signalSpec.size - 1))) {
|
||||
ival -= 1 << signalSpec.size;
|
||||
}
|
||||
ival = ival * signalSpec.factor + signalSpec.offset;
|
||||
return ival;
|
||||
}
|
||||
|
||||
return DbcUtils.matrixBitNumber(lsbBitNumber);
|
||||
}
|
||||
generateColors() {
|
||||
let colors = Array(3);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
colors[i] = Math.floor(Math.random() * 255);
|
||||
}
|
||||
|
||||
lsbBitNumber() {
|
||||
// Returns LSB bit number in big endian ordering
|
||||
return colors;
|
||||
}
|
||||
|
||||
return DbcUtils.bigEndianBitIndex(this.startBit) + this.size - 1;
|
||||
}
|
||||
|
||||
msbBitIndex() {
|
||||
if(this.isLittleEndian) {
|
||||
return this.startBit + this.size - 1;
|
||||
} else {
|
||||
return this.startBit;
|
||||
}
|
||||
}
|
||||
|
||||
littleEndianBitDescription(bitIndex) {
|
||||
const bitRange = [this.startBit, this.startBit + this.size - 1];
|
||||
if (bitIndex < bitRange[0] || bitIndex > bitRange[1]) {
|
||||
return null;
|
||||
} else {
|
||||
const bitNumber = bitIndex - bitRange[0];
|
||||
const isLsb = bitIndex === bitRange[0];
|
||||
const isMsb = bitIndex === bitRange[1];
|
||||
return {bitNumber, isLsb, isMsb};
|
||||
}
|
||||
}
|
||||
|
||||
bigEndianBitDescription(bitIndex) {
|
||||
const start = DbcUtils.bigEndianBitIndex(this.startBit);
|
||||
const range = [start, start + this.size - 1];
|
||||
const bitNumber = DbcUtils.bigEndianBitIndex(bitIndex);
|
||||
|
||||
if(bitNumber < range[0] || bitNumber > range[1]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLsb = bitNumber === range[1];
|
||||
const isMsb = bitIndex === this.startBit;
|
||||
return {bitNumber, isLsb, isMsb, range};
|
||||
}
|
||||
|
||||
bitDescription(bitIndex) {
|
||||
if(this.isLittleEndian) {
|
||||
return this.littleEndianBitDescription(bitIndex);
|
||||
} else {
|
||||
return this.bigEndianBitDescription(bitIndex);
|
||||
}
|
||||
}
|
||||
|
||||
calculateRawRange() {
|
||||
let rawRange = Math.pow(2, this.size);
|
||||
if (this.isSigned) {
|
||||
rawRange /= 2;
|
||||
}
|
||||
return [(this.isSigned ? -1 * rawRange : 0),
|
||||
rawRange - 1]
|
||||
}
|
||||
|
||||
calculateMin() {
|
||||
const rawMin = this.calculateRawRange()[0];
|
||||
return this.offset + (rawMin * this.factor);
|
||||
}
|
||||
|
||||
calculateMax() {
|
||||
const rawMax = this.calculateRawRange()[1];
|
||||
return this.offset + (rawMax * this.factor);
|
||||
}
|
||||
|
||||
valueForInt32Signal(signalSpec, bits, bitsSwapped) {
|
||||
let startBit, bitArr;
|
||||
|
||||
if (signalSpec.isLittleEndian) {
|
||||
bitArr = bitsSwapped;
|
||||
startBit = signalSpec.startBit;
|
||||
} else {
|
||||
bitArr = bits;
|
||||
startBit = DbcUtils.bigEndianBitIndex(signalSpec.startBit);
|
||||
}
|
||||
let ival = Bitarray.extract(bitArr, startBit, signalSpec.size);
|
||||
|
||||
if(signalSpec.isSigned && (ival & (1<<(signalSpec.size - 1)))) {
|
||||
ival -= 1<<signalSpec.size
|
||||
}
|
||||
ival = (ival * signalSpec.factor) + signalSpec.offset;
|
||||
return ival;
|
||||
}
|
||||
|
||||
valueForInt64Signal(signalSpec, hexData) {
|
||||
const blen = hexData.length * 4;
|
||||
let value, startBit, dataBitPos;
|
||||
|
||||
if (signalSpec.isLittleEndian) {
|
||||
// TODO use buffer swap
|
||||
// value = UINT64(swapOrder(hexData, 16, 2), 16);
|
||||
startBit = signalSpec.startBit;
|
||||
dataBitPos = UINT64.fromNumber(startBit);
|
||||
} else {
|
||||
// big endian
|
||||
value = UINT64(hexData, 16);
|
||||
|
||||
startBit = DbcUtils.bigEndianBitIndex(signalSpec.startBit);
|
||||
dataBitPos = UINT64(blen - (startBit + signalSpec.size));
|
||||
}
|
||||
if(dataBitPos < 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let rightHandAnd = UINT64((1 << signalSpec.size) - 1);
|
||||
let ival = (value.shiftr(dataBitPos)).and(rightHandAnd).toNumber();
|
||||
|
||||
if(signalSpec.isSigned && (ival & (1<<(signalSpec.size - 1)))) {
|
||||
ival -= 1<<signalSpec.size
|
||||
}
|
||||
ival = (ival * signalSpec.factor) + signalSpec.offset;
|
||||
return ival;
|
||||
}
|
||||
|
||||
generateColors() {
|
||||
let colors = Array(3);
|
||||
for(let i = 0; i < 3; i++) {
|
||||
colors[i] = Math.floor(Math.random() * 255);
|
||||
}
|
||||
|
||||
return colors;
|
||||
}
|
||||
|
||||
equals(otherSignal) {
|
||||
return (otherSignal.name === this.name
|
||||
&& otherSignal.startBit === this.startBit
|
||||
&& otherSignal.size === this.size
|
||||
&& otherSignal.isLittleEndian === this.isLittleEndian
|
||||
&& otherSignal.isSigned === this.isSigned
|
||||
&& otherSignal.isFloat === this.isFloat
|
||||
&& otherSignal.factor === this.factor
|
||||
&& otherSignal.offset === this.offset
|
||||
&& otherSignal.unit === this.unit
|
||||
&& otherSignal.receiver.length===this.receiver.length
|
||||
&& otherSignal.receiver.every((v,i)=> v === this.receiver[i])
|
||||
&& otherSignal.comment === this.comment
|
||||
&& otherSignal.multiplex === this.multiplex);
|
||||
}
|
||||
equals(otherSignal) {
|
||||
return (
|
||||
otherSignal.name === this.name &&
|
||||
otherSignal.startBit === this.startBit &&
|
||||
otherSignal.size === this.size &&
|
||||
otherSignal.isLittleEndian === this.isLittleEndian &&
|
||||
otherSignal.isSigned === this.isSigned &&
|
||||
otherSignal.isFloat === this.isFloat &&
|
||||
otherSignal.factor === this.factor &&
|
||||
otherSignal.offset === this.offset &&
|
||||
otherSignal.unit === this.unit &&
|
||||
otherSignal.receiver.length === this.receiver.length &&
|
||||
otherSignal.receiver.every((v, i) => v === this.receiver[i]) &&
|
||||
otherSignal.comment === this.comment &&
|
||||
otherSignal.multiplex === this.multiplex
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,41 @@
|
|||
/* eslint-disable no-restricted-globals*/
|
||||
export function objToQuery(obj) {
|
||||
return Object.keys(obj).map(k => k + '=' + encodeURIComponent(decodeURIComponent(obj[k]))).join('&');
|
||||
return Object.keys(obj)
|
||||
.map(k => k + "=" + encodeURIComponent(decodeURIComponent(obj[k])))
|
||||
.join("&");
|
||||
}
|
||||
|
||||
export function getUrlParameter(name) {
|
||||
var location = window.location;
|
||||
name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||
var results = regex.exec(location.search);
|
||||
var location = window.location;
|
||||
name = name.replace(/[[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
|
||||
var results = regex.exec(location.search);
|
||||
|
||||
return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||
return results === null
|
||||
? null
|
||||
: decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
export function modifyQueryParameters({add, remove}) {
|
||||
var regex = new RegExp('[\\?&]([^&#]+)=([^&#]*)');
|
||||
var results = regex.exec(location.search);
|
||||
export function modifyQueryParameters({ add, remove }) {
|
||||
var regex = new RegExp("[\\?&]([^&#]+)=([^&#]*)");
|
||||
var results = regex.exec(location.search);
|
||||
|
||||
let params = {};
|
||||
if(results != null) {
|
||||
for(let i = 1; i < results.length - 1; i+=2) {
|
||||
let key = results[i], value = results[i+1];
|
||||
params[key] = value;
|
||||
}
|
||||
for(let key in params) {
|
||||
if(remove.indexOf(key) !== -1) {
|
||||
delete params[key];
|
||||
}
|
||||
}
|
||||
params = {...params, ...add};
|
||||
} else {
|
||||
params = add;
|
||||
let params = {};
|
||||
if (results != null) {
|
||||
for (let i = 1; i < results.length - 1; i += 2) {
|
||||
let key = results[i],
|
||||
value = results[i + 1];
|
||||
params[key] = value;
|
||||
}
|
||||
for (let key in params) {
|
||||
if (remove.indexOf(key) !== -1) {
|
||||
delete params[key];
|
||||
}
|
||||
}
|
||||
params = { ...params, ...add };
|
||||
} else {
|
||||
params = add;
|
||||
}
|
||||
|
||||
return location.origin + location.pathname + '?' + objToQuery(params);
|
||||
return location.origin + location.pathname + "?" + objToQuery(params);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
import DBC from '../models/can/dbc';
|
||||
import DbcUtils from '../utils/dbc';
|
||||
/* eslint-env worker */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
import DBC from "../models/can/dbc";
|
||||
import DbcUtils from "../utils/dbc";
|
||||
|
||||
|
||||
function processStreamedCanMessages(newCanMessages,
|
||||
prevMsgEntries,
|
||||
firstCanTime,
|
||||
dbc,
|
||||
lastBusTime,
|
||||
byteStateChangeCountsByMessage,
|
||||
maxByteStateChangeCount) {
|
||||
function processStreamedCanMessages(
|
||||
newCanMessages,
|
||||
prevMsgEntries,
|
||||
firstCanTime,
|
||||
dbc,
|
||||
lastBusTime,
|
||||
byteStateChangeCountsByMessage,
|
||||
maxByteStateChangeCount
|
||||
) {
|
||||
const messages = {};
|
||||
let lastCanTime;
|
||||
|
||||
for(let batch = 0; batch < newCanMessages.length; batch++) {
|
||||
let {time, canMessages} = newCanMessages[batch];
|
||||
for (let batch = 0; batch < newCanMessages.length; batch++) {
|
||||
let { time, canMessages } = newCanMessages[batch];
|
||||
canMessages = canMessages.sort((msg1, msg2) => {
|
||||
if(msg1[1] < msg2[1]) {
|
||||
if (msg1[1] < msg2[1]) {
|
||||
return -1;
|
||||
} else if(msg1[1] > msg2[1]) {
|
||||
} else if (msg1[1] > msg2[1]) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
|
|
@ -26,11 +29,11 @@ function processStreamedCanMessages(newCanMessages,
|
|||
|
||||
let busTimeSum = 0;
|
||||
|
||||
for(let i = 0; i < canMessages.length; i++) {
|
||||
for (let i = 0; i < canMessages.length; i++) {
|
||||
let [address, busTime, data, source] = canMessages[i];
|
||||
let prevBusTime;
|
||||
if(i === 0) {
|
||||
if(lastBusTime === null) {
|
||||
if (i === 0) {
|
||||
if (lastBusTime === null) {
|
||||
prevBusTime = 0;
|
||||
} else {
|
||||
prevBusTime = lastBusTime;
|
||||
|
|
@ -39,47 +42,75 @@ function processStreamedCanMessages(newCanMessages,
|
|||
prevBusTime = canMessages[i - 1][1];
|
||||
}
|
||||
|
||||
if(busTime >= prevBusTime) {
|
||||
if (busTime >= prevBusTime) {
|
||||
busTimeSum += busTime - prevBusTime;
|
||||
} else {
|
||||
busTimeSum += (0x10000 - prevBusTime) + busTime;
|
||||
busTimeSum += 0x10000 - prevBusTime + busTime;
|
||||
}
|
||||
const message = [...canMessages[i]];
|
||||
message[1] = time + busTimeSum / 500000.0;
|
||||
|
||||
if(firstCanTime === 0) {
|
||||
if (firstCanTime === 0) {
|
||||
firstCanTime = message[1];
|
||||
}
|
||||
|
||||
const msgEntry = DbcUtils.addCanMessage(message, dbc, firstCanTime, messages, prevMsgEntries, byteStateChangeCountsByMessage);
|
||||
if(i === canMessages.length - 1) {
|
||||
const msgEntry = DbcUtils.addCanMessage(
|
||||
message,
|
||||
dbc,
|
||||
firstCanTime,
|
||||
messages,
|
||||
prevMsgEntries,
|
||||
byteStateChangeCountsByMessage
|
||||
);
|
||||
if (i === canMessages.length - 1) {
|
||||
lastCanTime = msgEntry.relTime;
|
||||
}
|
||||
}
|
||||
|
||||
lastBusTime = canMessages[canMessages.length - 1][1];
|
||||
const newMaxByteStateChangeCount = DbcUtils.findMaxByteStateChangeCount(messages);
|
||||
const newMaxByteStateChangeCount = DbcUtils.findMaxByteStateChangeCount(
|
||||
messages
|
||||
);
|
||||
|
||||
if(newMaxByteStateChangeCount > maxByteStateChangeCount) {
|
||||
if (newMaxByteStateChangeCount > maxByteStateChangeCount) {
|
||||
maxByteStateChangeCount = newMaxByteStateChangeCount;
|
||||
}
|
||||
|
||||
Object.keys(messages).forEach((key) => {
|
||||
messages[key] = DbcUtils.setMessageByteColors(messages[key], maxByteStateChangeCount);
|
||||
Object.keys(messages).forEach(key => {
|
||||
messages[key] = DbcUtils.setMessageByteColors(
|
||||
messages[key],
|
||||
maxByteStateChangeCount
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
self.postMessage({newMessages: messages, seekTime: lastCanTime, lastBusTime, firstCanTime, maxByteStateChangeCount});
|
||||
self.postMessage({
|
||||
newMessages: messages,
|
||||
seekTime: lastCanTime,
|
||||
lastBusTime,
|
||||
firstCanTime,
|
||||
maxByteStateChangeCount
|
||||
});
|
||||
}
|
||||
|
||||
self.onmessage = function(e) {
|
||||
const {newCanMessages, prevMsgEntries, firstCanTime, dbcText, lastBusTime, byteStateChangeCountsByMessage, maxByteStateChangeCount} = e.data;
|
||||
const {
|
||||
newCanMessages,
|
||||
prevMsgEntries,
|
||||
firstCanTime,
|
||||
dbcText,
|
||||
lastBusTime,
|
||||
byteStateChangeCountsByMessage,
|
||||
maxByteStateChangeCount
|
||||
} = e.data;
|
||||
const dbc = new DBC(dbcText);
|
||||
processStreamedCanMessages(newCanMessages,
|
||||
prevMsgEntries,
|
||||
firstCanTime,
|
||||
dbc,
|
||||
lastBusTime,
|
||||
byteStateChangeCountsByMessage,
|
||||
maxByteStateChangeCount);
|
||||
}
|
||||
processStreamedCanMessages(
|
||||
newCanMessages,
|
||||
prevMsgEntries,
|
||||
firstCanTime,
|
||||
dbc,
|
||||
lastBusTime,
|
||||
byteStateChangeCountsByMessage,
|
||||
maxByteStateChangeCount
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,69 +1,104 @@
|
|||
import Sentry from '../logging/Sentry';
|
||||
/* eslint-disable no-restricted-globals */
|
||||
import Sentry from "../logging/Sentry";
|
||||
import NumpyLoader from "../utils/loadnpy";
|
||||
import DBC from "../models/can/dbc";
|
||||
import DbcUtils from "../utils/dbc";
|
||||
import * as CanApi from "../api/can";
|
||||
|
||||
var window = self;
|
||||
require('core-js/fn/object/values');
|
||||
import NumpyLoader from '../utils/loadnpy';
|
||||
import DBC from '../models/can/dbc';
|
||||
import DbcUtils from '../utils/dbc';
|
||||
import * as CanApi from '../api/can';
|
||||
require("core-js/fn/object/values");
|
||||
|
||||
const Int64LE = require('int64-buffer').Int64LE
|
||||
const Int64LE = require("int64-buffer").Int64LE;
|
||||
|
||||
async function loadCanPart(dbc, base, num, canStartTime, prevMsgEntries, maxByteStateChangeCount) {
|
||||
var messages = {};
|
||||
const {times,
|
||||
sources,
|
||||
addresses,
|
||||
datas} = await CanApi.fetchCanPart(base, num);
|
||||
async function loadCanPart(
|
||||
dbc,
|
||||
base,
|
||||
num,
|
||||
canStartTime,
|
||||
prevMsgEntries,
|
||||
maxByteStateChangeCount
|
||||
) {
|
||||
var messages = {};
|
||||
const { times, sources, addresses, datas } = await CanApi.fetchCanPart(
|
||||
base,
|
||||
num
|
||||
);
|
||||
|
||||
for (var i = 0; i < times.length; i++) {
|
||||
var t = times[i];
|
||||
var src = Int64LE(sources, i * 8).toString(10);
|
||||
var address = Int64LE(addresses, i * 8);
|
||||
var addressHexStr = address.toString(16);
|
||||
var id = src + ":" + addressHexStr;
|
||||
|
||||
for (var i = 0; i < times.length; i++) {
|
||||
var t = times[i];
|
||||
var src = Int64LE(sources, i*8).toString(10);
|
||||
var address = Int64LE(addresses, i*8);
|
||||
var addressHexStr = address.toString(16);
|
||||
var id = src + ":" + addressHexStr;
|
||||
var addressNum = address.toNumber();
|
||||
var data = datas.slice(i * 8, (i + 1) * 8);
|
||||
if (messages[id] === undefined)
|
||||
messages[id] = DbcUtils.createMessageSpec(
|
||||
dbc,
|
||||
address.toNumber(),
|
||||
id,
|
||||
src
|
||||
);
|
||||
|
||||
var addressNum = address.toNumber();
|
||||
var data = datas.slice(i*8, (i+1)*8);
|
||||
if (messages[id] === undefined) messages[id] = DbcUtils.createMessageSpec(dbc, address.toNumber(), id, src);
|
||||
const prevMsgEntry =
|
||||
messages[id].entries.length > 0
|
||||
? messages[id].entries[messages[id].entries.length - 1]
|
||||
: prevMsgEntries[id] || null;
|
||||
|
||||
const prevMsgEntry = messages[id].entries.length > 0 ?
|
||||
messages[id].entries[messages[id].entries.length - 1]
|
||||
:
|
||||
(prevMsgEntries[id] || null);
|
||||
const { msgEntry, byteStateChangeCounts } = DbcUtils.parseMessage(
|
||||
dbc,
|
||||
t,
|
||||
address.toNumber(),
|
||||
data,
|
||||
canStartTime,
|
||||
prevMsgEntry
|
||||
);
|
||||
messages[id].byteStateChangeCounts = byteStateChangeCounts.map(
|
||||
(count, idx) => messages[id].byteStateChangeCounts[idx] + count
|
||||
);
|
||||
|
||||
const {msgEntry,
|
||||
byteStateChangeCounts} = DbcUtils.parseMessage(dbc,
|
||||
t,
|
||||
address.toNumber(),
|
||||
data,
|
||||
canStartTime,
|
||||
prevMsgEntry);
|
||||
messages[id].byteStateChangeCounts = byteStateChangeCounts.map((count, idx) =>
|
||||
messages[id].byteStateChangeCounts[idx] + count
|
||||
);
|
||||
|
||||
messages[id].entries.push(msgEntry);
|
||||
messages[id].entries.push(msgEntry);
|
||||
}
|
||||
|
||||
const newMaxByteStateChangeCount = DbcUtils.findMaxByteStateChangeCount(messages);
|
||||
if(newMaxByteStateChangeCount > maxByteStateChangeCount) {
|
||||
const newMaxByteStateChangeCount = DbcUtils.findMaxByteStateChangeCount(
|
||||
messages
|
||||
);
|
||||
if (newMaxByteStateChangeCount > maxByteStateChangeCount) {
|
||||
maxByteStateChangeCount = newMaxByteStateChangeCount;
|
||||
}
|
||||
|
||||
Object.keys(messages).forEach((key) => {
|
||||
messages[key] = DbcUtils.setMessageByteColors(messages[key], maxByteStateChangeCount);
|
||||
Object.keys(messages).forEach(key => {
|
||||
messages[key] = DbcUtils.setMessageByteColors(
|
||||
messages[key],
|
||||
maxByteStateChangeCount
|
||||
);
|
||||
});
|
||||
|
||||
self.postMessage({newMessages: messages,
|
||||
maxByteStateChangeCount});
|
||||
self.postMessage({
|
||||
newMessages: messages,
|
||||
maxByteStateChangeCount
|
||||
});
|
||||
self.close();
|
||||
}
|
||||
|
||||
self.onmessage = function(e) {
|
||||
const {dbcText, base, num, canStartTime, prevMsgEntries, maxByteStateChangeCount} = e.data;
|
||||
const {
|
||||
dbcText,
|
||||
base,
|
||||
num,
|
||||
canStartTime,
|
||||
prevMsgEntries,
|
||||
maxByteStateChangeCount
|
||||
} = e.data;
|
||||
|
||||
const dbc = new DBC(dbcText);
|
||||
loadCanPart(dbc, base, num, canStartTime, prevMsgEntries, maxByteStateChangeCount);
|
||||
}
|
||||
const dbc = new DBC(dbcText);
|
||||
loadCanPart(
|
||||
dbc,
|
||||
base,
|
||||
num,
|
||||
canStartTime,
|
||||
prevMsgEntries,
|
||||
maxByteStateChangeCount
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,37 +1,38 @@
|
|||
import Sentry from '../logging/Sentry';
|
||||
/* eslint-disable no-restricted-globals */
|
||||
import Sentry from "../logging/Sentry";
|
||||
|
||||
import * as CanApi from "../api/can";
|
||||
|
||||
var window = self;
|
||||
require('core-js/fn/object/values');
|
||||
import * as CanApi from '../api/can';
|
||||
require("core-js/fn/object/values");
|
||||
|
||||
function calcCanFrameOffset(firstCanPart, partCanTimes) {
|
||||
const firstCanTime = partCanTimes[0];
|
||||
const firstPartLastCanTime = partCanTimes[partCanTimes.length - 1];
|
||||
|
||||
return (60 * firstCanPart
|
||||
+ (60 - (firstPartLastCanTime - firstCanTime)));
|
||||
return 60 * firstCanPart + (60 - (firstPartLastCanTime - firstCanTime));
|
||||
}
|
||||
|
||||
async function fetchCanTimes(base, part) {
|
||||
const times = await CanApi.fetchCanTimes(base, part);
|
||||
return times.length > 0 ? times : null;
|
||||
const times = await CanApi.fetchCanTimes(base, part);
|
||||
return times.length > 0 ? times : null;
|
||||
}
|
||||
|
||||
async function onMessage(e) {
|
||||
const {base, partCount} = e.data;
|
||||
const { base, partCount } = e.data;
|
||||
|
||||
for(let part = 0; part < partCount; part++) {
|
||||
const canTimes = await fetchCanTimes(base, part);
|
||||
for (let part = 0; part < partCount; part++) {
|
||||
const canTimes = await fetchCanTimes(base, part);
|
||||
|
||||
if(canTimes !== null) {
|
||||
const canFrameOffset = calcCanFrameOffset(part, canTimes);
|
||||
self.postMessage({canFrameOffset, firstCanTime: canTimes[0]});
|
||||
self.close();
|
||||
break;
|
||||
}
|
||||
if (canTimes !== null) {
|
||||
const canFrameOffset = calcCanFrameOffset(part, canTimes);
|
||||
self.postMessage({ canFrameOffset, firstCanTime: canTimes[0] });
|
||||
self.close();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
self.close();
|
||||
self.close();
|
||||
}
|
||||
|
||||
self.onmessage = onMessage;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,30 @@
|
|||
/* eslint-env worker */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
// import Sentry from '../logging/Sentry';
|
||||
|
||||
import NumpyLoader from "../utils/loadnpy";
|
||||
import * as CanApi from "../api/can";
|
||||
|
||||
var window = self;
|
||||
require('core-js/fn/object/values');
|
||||
import NumpyLoader from '../utils/loadnpy';
|
||||
import * as CanApi from '../api/can';
|
||||
require("core-js/fn/object/values");
|
||||
|
||||
|
||||
const Int64LE = require('int64-buffer').Int64LE
|
||||
const Int64LE = require("int64-buffer").Int64LE;
|
||||
|
||||
function transformData(data) {}
|
||||
async function fetchAndPostData(base, currentPart, [minPart, maxPart], canStartTime) {
|
||||
console.log('\n\nfetchAndPostData', `${currentPart} of ${maxPart}`);
|
||||
async function fetchAndPostData(
|
||||
base,
|
||||
currentPart,
|
||||
[minPart, maxPart],
|
||||
canStartTime
|
||||
) {
|
||||
console.log("\n\nfetchAndPostData", `${currentPart} of ${maxPart}`);
|
||||
|
||||
// if we've exhausted the parts, close up shop
|
||||
if(currentPart > maxPart) {
|
||||
if (currentPart > maxPart) {
|
||||
self.postMessage({
|
||||
progress: 100,
|
||||
shouldClose: true
|
||||
})
|
||||
});
|
||||
self.close();
|
||||
return;
|
||||
}
|
||||
|
|
@ -25,51 +32,61 @@ async function fetchAndPostData(base, currentPart, [minPart, maxPart], canStartT
|
|||
let awaitedData = null;
|
||||
try {
|
||||
awaitedData = await CanApi.fetchCanPart(base, currentPart);
|
||||
} catch(e) {
|
||||
console.log('fetchCanPart missing part', e)
|
||||
return fetchAndPostData(base, currentPart+1, [minPart, maxPart], canStartTime)
|
||||
} catch (e) {
|
||||
console.log("fetchCanPart missing part", e);
|
||||
return fetchAndPostData(
|
||||
base,
|
||||
currentPart + 1,
|
||||
[minPart, maxPart],
|
||||
canStartTime
|
||||
);
|
||||
}
|
||||
const {
|
||||
times,
|
||||
sources,
|
||||
addresses,
|
||||
datas,
|
||||
} = awaitedData;
|
||||
const { times, sources, addresses, datas } = awaitedData;
|
||||
|
||||
// times is a float64array, which we want to be a normal array for now
|
||||
const logData = [].slice.call(times).map((t, i) => {
|
||||
var src = Int64LE(sources, i*8).toString(10);
|
||||
var address = Int64LE(addresses, i*8);
|
||||
var addressHexStr = address.toString(16);
|
||||
var id = src + ":" + addressHexStr;
|
||||
const logData = [].slice
|
||||
.call(times)
|
||||
.map((t, i) => {
|
||||
var src = Int64LE(sources, i * 8).toString(10);
|
||||
var address = Int64LE(addresses, i * 8);
|
||||
var addressHexStr = address.toString(16);
|
||||
var id = src + ":" + addressHexStr;
|
||||
|
||||
var addressNum = address.toNumber();
|
||||
var data = datas.slice(i*8, (i+1)*8);
|
||||
var addressNum = address.toNumber();
|
||||
var data = datas.slice(i * 8, (i + 1) * 8);
|
||||
|
||||
return `${t-canStartTime},${addressNum},${src},${Buffer.from(data).toString('hex')}\n`
|
||||
}).join('')
|
||||
return `${t - canStartTime},${addressNum},${src},${Buffer.from(
|
||||
data
|
||||
).toString("hex")}\n`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
console.log('posting message')
|
||||
console.log("posting message");
|
||||
self.postMessage({
|
||||
progress: 10,
|
||||
logData,
|
||||
shouldClose: false
|
||||
})
|
||||
});
|
||||
|
||||
fetchAndPostData(base, currentPart+1, [minPart, maxPart], canStartTime)
|
||||
fetchAndPostData(base, currentPart + 1, [minPart, maxPart], canStartTime);
|
||||
}
|
||||
|
||||
self.onmessage = function(e) {
|
||||
console.log('onmessage worker')
|
||||
console.log("onmessage worker");
|
||||
self.postMessage({
|
||||
progress: 0,
|
||||
logData: 'time,addr,bus,data',
|
||||
logData: "time,addr,bus,data",
|
||||
shouldClose: false
|
||||
})
|
||||
const {base, parts, canStartTime, prevMsgEntries, maxByteStateChangeCount} = e.data;
|
||||
});
|
||||
const {
|
||||
base,
|
||||
parts,
|
||||
canStartTime,
|
||||
prevMsgEntries,
|
||||
maxByteStateChangeCount
|
||||
} = e.data;
|
||||
|
||||
// const dbc = new DBC(dbcText);
|
||||
// saveDBC(dbc, base, num, canStartTime);
|
||||
fetchAndPostData(base, parts[0], parts, canStartTime)
|
||||
}
|
||||
|
||||
fetchAndPostData(base, parts[0], parts, canStartTime);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,31 +1,46 @@
|
|||
import Sentry from '../logging/Sentry';
|
||||
/* eslint-env worker */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
import Sentry from "../logging/Sentry";
|
||||
import DBC from "../models/can/dbc";
|
||||
import DbcUtils from "../utils/dbc";
|
||||
|
||||
var window = self;
|
||||
require('core-js/fn/object/values');
|
||||
import DBC from '../models/can/dbc';
|
||||
import DbcUtils from '../utils/dbc';
|
||||
require("core-js/fn/object/values");
|
||||
|
||||
function reparseEntry(entry, address, dbc, canStartTime, prevMsgEntry) {
|
||||
const data = Buffer.from(entry.hexData, 'hex');
|
||||
return DbcUtils.parseMessage(dbc, entry.time, address, data, canStartTime, prevMsgEntry);
|
||||
const data = Buffer.from(entry.hexData, "hex");
|
||||
return DbcUtils.parseMessage(
|
||||
dbc,
|
||||
entry.time,
|
||||
address,
|
||||
data,
|
||||
canStartTime,
|
||||
prevMsgEntry
|
||||
);
|
||||
}
|
||||
|
||||
self.onmessage = function(e) {
|
||||
const {messages, dbcText, canStartTime} = e.data;
|
||||
const dbc = new DBC(dbcText);
|
||||
Object.keys(messages).forEach((messageId) => {
|
||||
const message = messages[messageId];
|
||||
for(var i = 0; i < message.entries.length; i++) {
|
||||
const entry = message.entries[i];
|
||||
const prevMsgEntry = i > 0 ? message.entries[i - 1] : null;
|
||||
const { messages, dbcText, canStartTime } = e.data;
|
||||
const dbc = new DBC(dbcText);
|
||||
Object.keys(messages).forEach(messageId => {
|
||||
const message = messages[messageId];
|
||||
for (var i = 0; i < message.entries.length; i++) {
|
||||
const entry = message.entries[i];
|
||||
const prevMsgEntry = i > 0 ? message.entries[i - 1] : null;
|
||||
|
||||
const {msgEntry} = reparseEntry(entry, message.address, dbc, canStartTime, prevMsgEntry);
|
||||
const { msgEntry } = reparseEntry(
|
||||
entry,
|
||||
message.address,
|
||||
dbc,
|
||||
canStartTime,
|
||||
prevMsgEntry
|
||||
);
|
||||
|
||||
message.entries[i] = msgEntry;
|
||||
}
|
||||
messages[messageId] = message;
|
||||
});
|
||||
message.entries[i] = msgEntry;
|
||||
}
|
||||
messages[messageId] = message;
|
||||
});
|
||||
|
||||
self.postMessage(messages);
|
||||
self.close();
|
||||
}
|
||||
self.postMessage(messages);
|
||||
self.close();
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue