From 1513d58beb7054fd13b335ee032e6e41066404de Mon Sep 17 00:00:00 2001 From: chemicstry Date: Tue, 23 Jan 2018 03:03:50 +0200 Subject: [PATCH] Add loading animation and prepare for production release --- .gitignore | 3 ++ client/GraphMap.jsx | 57 ++++++++++++++++++++--- package-lock.json | 61 ++++++++++++++----------- package.json | 9 +++- webpack.production.config.js | 87 ++++++++++++++++++++++++++++++++++++ 5 files changed, 184 insertions(+), 33 deletions(-) create mode 100644 webpack.production.config.js diff --git a/.gitignore b/.gitignore index 97bfb65..a034de2 100644 --- a/.gitignore +++ b/.gitignore @@ -60,3 +60,6 @@ typings/ # lnd files lnd.cert admin.macaroon + +# built files +dist/ diff --git a/client/GraphMap.jsx b/client/GraphMap.jsx index 75c52fa..8db7015 100644 --- a/client/GraphMap.jsx +++ b/client/GraphMap.jsx @@ -4,6 +4,27 @@ import { ObjectTypes } from './DataStore.js'; import { computed, autorun } from 'mobx'; import { observer } from 'mobx-react'; +import FontAwesome from 'react-fontawesome'; +import FA from 'font-awesome/css/font-awesome.css'; + +var styles = { + container: { + position: 'relative', + width: '100%', + height: '100%' + }, + overlay: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center' + } +} + @observer export default class App extends React.Component { state = { @@ -37,8 +58,15 @@ export default class App extends React.Component { this.props.store.selectObject(event.edges[0]); else this.props.store.selectObject(undefined); + }, + // Called when initial stabilization is complete + stabilizationIterationsDone: (event) => { + this.setState({ + loading: false + }); } - } + }, + loading: true }; // Transforms network data into vis.js data format @@ -80,6 +108,12 @@ export default class App extends React.Component { }); } + // Notify that graph changed and will need to be restabilised + this.graphChanged = true; + this.setState({ + loading: true + }); + return graph; } @@ -95,8 +129,6 @@ export default class App extends React.Component { if (!this.network || !object) return; - - console.log(object); if (object.type == ObjectTypes.NODE) { @@ -114,16 +146,29 @@ export default class App extends React.Component { }); } + componentWillReact() { + + } + componentDidUpdate(prevProps, prevState) { - if (this.network) + // Stabilize if graph changed + if (this.network && this.graphChanged) { - setTimeout(() => this.network.fit(), 500); + this.network.stabilize(); + this.graphChanged = false; } } render() { return ( - this.getNetwork(network)} /> +
+ this.getNetwork(network)} /> + { this.state.loading ? ( +
+ +
+ ) : '' } +
); } } diff --git a/package-lock.json b/package-lock.json index 8defea4..6fc641e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -278,32 +278,6 @@ "integrity": "sha1-lfE2KbEsOlGl0hWr3OKqnzL4B3M=", "dev": true }, - "autoprefixer": { - "version": "6.7.7", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz", - "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=", - "dev": true, - "requires": { - "browserslist": "1.7.7", - "caniuse-db": "1.0.30000793", - "normalize-range": "0.1.2", - "num2fraction": "1.2.2", - "postcss": "5.2.18", - "postcss-value-parser": "3.3.0" - }, - "dependencies": { - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "1.0.30000793", - "electron-to-chromium": "1.3.31" - } - } - } - }, "axios": { "version": "0.17.1", "resolved": "https://registry.npmjs.org/axios/-/axios-0.17.1.tgz", @@ -2005,6 +1979,32 @@ "postcss-unique-selectors": "2.0.2", "postcss-value-parser": "3.3.0", "postcss-zindex": "2.2.0" + }, + "dependencies": { + "autoprefixer": { + "version": "6.7.7", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz", + "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=", + "dev": true, + "requires": { + "browserslist": "1.7.7", + "caniuse-db": "1.0.30000793", + "normalize-range": "0.1.2", + "num2fraction": "1.2.2", + "postcss": "5.2.18", + "postcss-value-parser": "3.3.0" + } + }, + "browserslist": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", + "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", + "dev": true, + "requires": { + "caniuse-db": "1.0.30000793", + "electron-to-chromium": "1.3.31" + } + } } }, "csso": { @@ -6849,6 +6849,15 @@ "align-text": "0.1.4" } }, + "rimraf": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", + "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", + "dev": true, + "requires": { + "glob": "7.1.2" + } + }, "ripemd160": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.1.tgz", diff --git a/package.json b/package.json index e86e905..be22e97 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,14 @@ "version": "1.0.0", "description": "", "main": "index.js", + "repository": { + "type": "git", + "url": "https://github.com/chemicstry/recksplorer.git" + }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "rimraf dist && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors", + "start": "node server" }, "author": "", "license": "ISC", @@ -43,6 +49,7 @@ "file-loader": "^1.1.6", "html-webpack-plugin": "^2.30.1", "resolve-url-loader": "^2.2.1", + "rimraf": "^2.6.2", "style-loader": "^0.19.1", "webpack": "^3.10.0", "webpack-dev-middleware": "^2.0.4", diff --git a/webpack.production.config.js b/webpack.production.config.js new file mode 100644 index 0000000..9659cc6 --- /dev/null +++ b/webpack.production.config.js @@ -0,0 +1,87 @@ +'use strict'; + +var path = require('path'); +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: [ + path.join(__dirname, 'client/main.js') + ], + output: { + path: path.join(__dirname, '/dist/'), + filename: '[name]-[hash].min.js', + publicPath: '/' + }, + plugins: [ + new HtmlWebpackPlugin({ + template: 'client/index.tpl.html', + inject: 'body', + filename: 'index.html' + }), + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.optimize.UglifyJsPlugin({ + compressor: { + warnings: false, + screw_ie8: true + } + }) + ], + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader', + query: { + "presets": [ + ["env", {"modules": false}], + "stage-1", + "react" + ], + "plugins": [ + "transform-runtime", + "transform-decorators-legacy" + ] + } + }, + { + test: /\.json?$/, + loader: 'json' + }, + { + test: /\font-awesome.css$/, + loader: 'css-loader', + query: { + modules: false + } + }, + { + test: /\.css$/, + loaders: [ + { + loader: 'style-loader' + }, + { + loader: 'css-loader', + query: { + modules: true, + localIdentName: '[name]__[local]___[hash:base64:5]' + } + }, + { + loader: 'resolve-url-loader' + } + ], + }, + { + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url-loader?limit=10000&mimetype=application/font-woff" + }, + { + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader" + }, + ] + } +};