dashboard: CPU, memory, diskIO and traffic on the footer (#15950)

* dashboard: footer, deep state update

* dashboard: resolve asset path

* dashboard: prevent state update on every reconnection

* dashboard: fix linter issue

* dashboard, cmd: minor UI fix, include commit hash

* dashboard: gitCommit renamed to commit

* dashboard: move the geth version to the right, make commit optional

* dashboard: memory, traffic and CPU on footer

* dashboard: fix merge

* dashboard: CPU, diskIO on footer

* dashboard: rename variables, use group declaration

* dashboard: docs

15 files changed, 770 insertions, 548 deletions

diff --git a/dashboard/assets/.eslintrc b/dashboard/assets/.eslintrc
index 67c11dcc0..ab7a3a039 100644
--- a/dashboard/assets/.eslintrc
+++ b/dashboard/assets/.eslintrc
@@ -40,6 +40,9 @@
         'react/jsx-indent':       ['error', 'tab'],
         'react/jsx-indent-props': ['error', 'tab'],
         'react/prefer-stateless-function': 'off',
+        'jsx-quotes':  ['error', 'prefer-single'],
+        'no-plusplus': 'off',
+        'no-console':  ['error', { allow: ['error'] }],
 
         // Specifies the maximum length of a line.
         'max-len': ['warn', 120, 2, {
@@ -49,7 +52,7 @@
             'ignoreStrings':          true,
             'ignoreTemplateLiterals': true,
         }],
-        // Enforces spacing between keys and values in object literal properties.
+        // Enforces consistent spacing between keys and values in object literal properties.
         'key-spacing': ['error', {'align': {
             'beforeColon': false,
             'afterColon':  true,
diff --git a/dashboard/assets/components/Common.jsx b/dashboard/assets/common.jsx
index 256a3e661..08a7554ff 100644
--- a/dashboard/assets/components/Common.jsx
+++ b/dashboard/assets/common.jsx
@@ -63,3 +63,9 @@ export type MenuProp = {|...ProvidedMenuProp, id: string|};
 export const MENU: Map<string, {...MenuProp}> = new Map(menuSkeletons.map(({id, menu}) => ([id, {id, ...menu}])));
 
 export const DURATION = 200;
+
+export const styles = {
+	light: {
+		color: 'rgba(255, 255, 255, 0.54)',
+	},
+}
diff --git a/dashboard/assets/components/Body.jsx b/dashboard/assets/components/Body.jsx
index 14e9ac358..054e04064 100644
--- a/dashboard/assets/components/Body.jsx
+++ b/dashboard/assets/components/Body.jsx
@@ -18,35 +18,32 @@
 
 import React, {Component} from 'react';
 
-import withStyles from 'material-ui/styles/withStyles';
-
 import SideBar from './SideBar';
 import Main from './Main';
 import type {Content} from '../types/content';
 
-// Styles for the Body component.
-const styles = () => ({
+// styles contains the constant styles of the component.
+const styles = {
 	body: {
 		display: 'flex',
 		width:   '100%',
 		height:  '100%',
 	},
-});
+};
+
 export type Props = {
-	classes: Object,
 	opened: boolean,
-	changeContent: () => {},
+	changeContent: string => void,
 	active: string,
 	content: Content,
 	shouldUpdate: Object,
 };
+
 // Body renders the body of the dashboard.
 class Body extends Component<Props> {
 	render() {
-		const {classes} = this.props; // The classes property is injected by withStyles().
-
 		return (
-			<div className={classes.body}>
+			<div style={styles.body}>
 				<SideBar
 					opened={this.props.opened}
 					changeContent={this.props.changeContent}
@@ -61,4 +58,4 @@ class Body extends Component<Props> {
 	}
 }
 
-export default withStyles(styles)(Body);
+export default Body;
diff --git a/dashboard/assets/components/ChartGrid.jsx b/dashboard/assets/components/ChartRow.jsx
index 45dde7499..1075346fe 100644
--- a/dashboard/assets/components/ChartGrid.jsx
+++ b/dashboard/assets/components/ChartRow.jsx
@@ -1,6 +1,6 @@
 // @flow
 
-// Copyright 2017 The go-ethereum Authors
+// Copyright 2018 The go-ethereum Authors
 // This file is part of the go-ethereum library.
 //
 // The go-ethereum library is free software: you can redistribute it and/or modify
@@ -17,33 +17,41 @@
 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
 
 import React, {Component} from 'react';
-import type {Node} from 'react';
+import type {ChildrenArray} from 'react';
 
 import Grid from 'material-ui/Grid';
-import {ResponsiveContainer} from 'recharts';
+
+// styles contains the constant styles of the component.
+const styles = {
+	container: {
+		flexWrap: 'nowrap',
+		height:   '100%',
+		maxWidth: '100%',
+		margin:   0,
+	},
+	item: {
+		flex:    1,
+		padding: 0,
+	},
+}
 
 export type Props = {
-	spacing: number,
-	children: Node,
+	children: ChildrenArray<React$Element<any>>,
 };
-// ChartGrid renders a grid container for responsive charts.
-// The children are Recharts components extended with the Material-UI's xs property.
-class ChartGrid extends Component<Props> {
+
+// ChartRow renders a row of equally sized responsive charts.
+class ChartRow extends Component<Props> {
 	render() {
 		return (
-			<Grid container spacing={this.props.spacing}>
-				{
-					React.Children.map(this.props.children, child => (
-						<Grid item xs={child.props.xs}>
-							<ResponsiveContainer width="100%" height={child.props.height}>
-								{React.cloneElement(child, {data: child.props.values.map(value => ({value}))})}
-							</ResponsiveContainer>
-						</Grid>
-					))
-				}
+			<Grid container direction='row' style={styles.container} justify='space-between'>
+				{React.Children.map(this.props.children, child => (
+					<Grid item xs style={styles.item}>
+						{child}
+					</Grid>
+				))}
 			</Grid>
 		);
 	}
 }
 
-export default ChartGrid;
+export default ChartRow;
diff --git a/dashboard/assets/components/CustomTooltip.jsx b/dashboard/assets/components/CustomTooltip.jsx
new file mode 100644
index 000000000..be7c624cf
--- /dev/null
+++ b/dashboard/assets/components/CustomTooltip.jsx
@@ -0,0 +1,95 @@
+// @flow
+
+// Copyright 2018 The go-ethereum Authors
+// This file is part of the go-ethereum library.
+//
+// The go-ethereum library is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Lesser General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// The go-ethereum library is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License
+// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
+
+import React, {Component} from 'react';
+
+import Typography from 'material-ui/Typography';
+import {styles} from '../common';
+
+// multiplier multiplies a number by another.
+export const multiplier = <T>(by: number = 1) => (x: number) => x * by;
+
+// percentPlotter renders a tooltip, which displays the value of the payload followed by a percent sign.
+export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
+	const p = mapper(payload);
+	if (typeof p !== 'number') {
+		return null;
+	}
+	return (
+		<Typography type='caption' color='inherit'>
+			<span style={styles.light}>{text}</span> {p.toFixed(2)} %
+		</Typography>
+	);
+};
+
+// unit contains the units for the bytePlotter.
+const unit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+// simplifyBytes returns the simplified version of the given value followed by the unit.
+const simplifyBytes = (x: number) => {
+	let i = 0;
+	for (; x > 1024 && i < 5; i++) {
+		x /= 1024;
+	}
+	return x.toFixed(2).toString().concat(' ', unit[i]);
+};
+
+// bytePlotter renders a tooltip, which displays the payload as a byte value.
+export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
+	const p = mapper(payload);
+	if (typeof p !== 'number') {
+		return null;
+	}
+	return (
+		<Typography type='caption' color='inherit'>
+			<span style={styles.light}>{text}</span> {simplifyBytes(p)}
+		</Typography>
+	);
+};
+
+// bytePlotter renders a tooltip, which displays the payload as a byte value followed by '/s'.
+export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
+	const p = mapper(payload);
+	if (typeof p !== 'number') {
+		return null;
+	}
+	return (
+		<Typography type='caption' color='inherit'>
+			<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s
+		</Typography>
+	);
+};
+
+export type Props = {
+	active: boolean,
+	payload: Object,
+	tooltip: <T>(text: string, mapper?: T => T) => (payload: mixed) => null | React$Element<any>,
+};
+
+// CustomTooltip takes a tooltip function, and uses it to plot the active value of the chart.
+class CustomTooltip extends Component<Props> {
+	render() {
+		const {active, payload, tooltip} = this.props;
+		if (!active || typeof tooltip !== 'function') {
+			return null;
+		}
+		return tooltip(payload[0].value);
+	}
+}
+
+export default CustomTooltip;
diff --git a/dashboard/assets/components/Dashboard.jsx b/dashboard/assets/components/Dashboard.jsx
index 036dd050b..90b1a785c 100644
--- a/dashboard/assets/components/Dashboard.jsx
+++ b/dashboard/assets/components/Dashboard.jsx
@@ -22,8 +22,7 @@ import withStyles from 'material-ui/styles/withStyles';
 
 import Header from './Header';
 import Body from './Body';
-import Footer from './Footer';
-import {MENU} from './Common';
+import {MENU} from '../common';
 import type {Content} from '../types/content';
 
 // deepUpdate updates an object corresponding to the given update data, which has
@@ -35,17 +34,17 @@ import type {Content} from '../types/content';
 // the generalization of the message handling. The only necessary thing is to set a
 // handler function for every path of the state in order to maximize the flexibility
 // of the update.
-const deepUpdate = (prev: Object, update: Object, updater: Object) => {
+const deepUpdate = (updater: Object, update: Object, prev: Object): $Shape<Content> => {
 	if (typeof update === 'undefined') {
 		// TODO (kurkomisi): originally this was deep copy, investigate it.
 		return prev;
 	}
 	if (typeof updater === 'function') {
-		return updater(prev, update);
+		return updater(update, prev);
 	}
 	const updated = {};
 	Object.keys(prev).forEach((key) => {
-		updated[key] = deepUpdate(prev[key], update[key], updater[key]);
+		updated[key] = deepUpdate(updater[key], update[key], prev[key]);
 	});
 
 	return updated;
@@ -56,21 +55,25 @@ const deepUpdate = (prev: Object, update: Object, updater: Object) => {
 // whether the involved data was changed or not by checking the message structure.
 //
 // We could return the message itself too, but it's safer not to give access to it.
-const shouldUpdate = (msg: Object, updater: Object) => {
+const shouldUpdate = (updater: Object, msg: Object) => {
 	const su = {};
 	Object.keys(msg).forEach((key) => {
-		su[key] = typeof updater[key] !== 'function' ? shouldUpdate(msg[key], updater[key]) : true;
+		su[key] = typeof updater[key] !== 'function' ? shouldUpdate(updater[key], msg[key]) : true;
 	});
 
 	return su;
 };
 
-// appender is a state update generalization function, which appends the update data
-// to the existing data. limit defines the maximum allowed size of the created array.
-const appender = <T>(limit: number) => (prev: Array<T>, update: Array<T>) => [...prev, ...update].slice(-limit);
+// replacer is a state updater function, which replaces the original data.
+const replacer = <T>(update: T) => update;
 
-// replacer is a state update generalization function, which replaces the original data.
-const replacer = <T>(prev: T, update: T) => update;
+// appender is a state updater function, which appends the update data to the
+// existing data. limit defines the maximum allowed size of the created array,
+// mapper maps the update data.
+const appender = <T>(limit: number, mapper = replacer) => (update: Array<T>, prev: Array<T>) => [
+	...prev,
+	...update.map(sample => mapper(sample)),
+].slice(-limit);
 
 // defaultContent is the initial value of the state content.
 const defaultContent: Content = {
@@ -79,8 +82,14 @@ const defaultContent: Content = {
 		commit:  null,
 	},
 	home: {
-		memory:  [],
-		traffic: [],
+		activeMemory:   [],
+		virtualMemory:  [],
+		networkIngress: [],
+		networkEgress:  [],
+		processCPU:     [],
+		systemCPU:      [],
+		diskRead:       [],
+		diskWrite:      [],
 	},
 	chain:   {},
 	txpool:  {},
@@ -91,16 +100,23 @@ const defaultContent: Content = {
 	},
 };
 
-// updaters contains the state update generalization functions for each path of the state.
-// TODO (kurkomisi): Define a tricky type which embraces the content and the handlers.
+// updaters contains the state updater functions for each path of the state.
+//
+// TODO (kurkomisi): Define a tricky type which embraces the content and the updaters.
 const updaters = {
 	general: {
 		version: replacer,
 		commit:  replacer,
 	},
 	home: {
-		memory:  appender(200),
-		traffic: appender(200),
+		activeMemory:   appender(200),
+		virtualMemory:  appender(200),
+		networkIngress: appender(200),
+		networkEgress:  appender(200),
+		processCPU:     appender(200),
+		systemCPU:      appender(200),
+		diskRead:       appender(200),
+		diskWrite:      appender(200),
 	},
 	chain:   null,
 	txpool:  null,
@@ -111,28 +127,34 @@ const updaters = {
 	},
 };
 
-// styles returns the styles for the Dashboard component.
-const styles = theme => ({
+// styles contains the constant styles of the component.
+const styles = {
+	dashboard: {
+		display:  'flex',
+		flexFlow: 'column',
+		width:    '100%',
+		height:   '100%',
+		zIndex:   1,
+		overflow: 'hidden',
+	}
+};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles: Object = (theme: Object) => ({
 	dashboard: {
-		display:    'flex',
-		flexFlow:   'column',
-		width:      '100%',
-		height:     '100%',
 		background: theme.palette.background.default,
-		zIndex:     1,
-		overflow:   'hidden',
 	},
 });
 
 export type Props = {
-	classes: Object,
+	classes: Object, // injected by withStyles()
 };
 
 type State = {
 	active: string, // active menu
 	sideBar: boolean, // true if the sidebar is opened
 	content: Content, // the visualized data
-	shouldUpdate: Object // labels for the components, which need to rerender based on the incoming message
+	shouldUpdate: Object, // labels for the components, which need to re-render based on the incoming message
 };
 
 // Dashboard is the main component, which renders the whole page, makes connection with the server and
@@ -176,8 +198,8 @@ class Dashboard extends Component<Props, State> {
 	// update updates the content corresponding to the incoming message.
 	update = (msg: $Shape<Content>) => {
 		this.setState(prevState => ({
-			content:      deepUpdate(prevState.content, msg, updaters),
-			shouldUpdate: shouldUpdate(msg, updaters),
+			content:      deepUpdate(updaters, msg, prevState.content),
+			shouldUpdate: shouldUpdate(updaters, msg),
 		}));
 	};
 
@@ -186,25 +208,17 @@ class Dashboard extends Component<Props, State> {
 		this.setState(prevState => (prevState.active !== newActive ? {active: newActive} : {}));
 	};
 
-	// openSideBar opens the sidebar.
-	openSideBar = () => {
-		this.setState({sideBar: true});
-	};
-
-	// closeSideBar closes the sidebar.
-	closeSideBar = () => {
-		this.setState({sideBar: false});
+	// switchSideBar opens or closes the sidebar's state.
+	switchSideBar = () => {
+		this.setState(prevState => ({sideBar: !prevState.sideBar}));
 	};
 
 	render() {
-		const {classes} = this.props; // The classes property is injected by withStyles().
-
 		return (
-			<div className={classes.dashboard}>
+			<div className={this.props.classes.dashboard} style={styles.dashboard}>
 				<Header
 					opened={this.state.sideBar}
-					openSideBar={this.openSideBar}
-					closeSideBar={this.closeSideBar}
+					switchSideBar={this.switchSideBar}
 				/>
 				<Body
 					opened={this.state.sideBar}
@@ -213,16 +227,9 @@ class Dashboard extends Component<Props, State> {
 					content={this.state.content}
 					shouldUpdate={this.state.shouldUpdate}
 				/>
-				<Footer
-					opened={this.state.sideBar}
-					openSideBar={this.openSideBar}
-					closeSideBar={this.closeSideBar}
-					general={this.state.content.general}
-					shouldUpdate={this.state.shouldUpdate}
-				/>
 			</div>
 		);
 	}
 }
 
-export default withStyles(styles)(Dashboard);
+export default withStyles(themeStyles)(Dashboard);
diff --git a/dashboard/assets/components/Footer.jsx b/dashboard/assets/components/Footer.jsx
index 7130b4e4e..54b67c464 100644
--- a/dashboard/assets/components/Footer.jsx
+++ b/dashboard/assets/components/Footer.jsx
@@ -19,62 +19,155 @@
 import React, {Component} from 'react';
 
 import withStyles from 'material-ui/styles/withStyles';
-import AppBar from 'material-ui/AppBar';
-import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
+import Grid from 'material-ui/Grid';
+import {ResponsiveContainer, AreaChart, Area, Tooltip} from 'recharts';
 
-import type {General} from '../types/content';
+import ChartRow from './ChartRow';
+import CustomTooltip, {bytePlotter, bytePerSecPlotter, percentPlotter, multiplier} from './CustomTooltip';
+import {styles as commonStyles} from '../common';
+import type {Content} from '../types/content';
 
-// styles contains styles for the Header component.
-const styles = theme => ({
+// styles contains the constant styles of the component.
+const styles = {
+	footer: {
+		maxWidth: '100%',
+		flexWrap: 'nowrap',
+		margin:   0,
+	},
+	chartRowWrapper: {
+		height:  '100%',
+		padding: 0,
+	},
+	doubleChartWrapper: {
+		height:     '100%',
+		width:      '99%',
+		paddingTop: 5,
+	},
+};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles: Object = (theme: Object) => ({
 	footer: {
 		backgroundColor: theme.palette.background.appBar,
 		color:           theme.palette.getContrastText(theme.palette.background.appBar),
 		zIndex:          theme.zIndex.appBar,
-	},
-	toolbar: {
-		paddingLeft:    theme.spacing.unit,
-		paddingRight:   theme.spacing.unit,
-		display:        'flex',
-		justifyContent: 'flex-end',
-	},
-	light: {
-		color: 'rgba(255, 255, 255, 0.54)',
+		height:          theme.spacing.unit * 10,
 	},
 });
+
 export type Props = {
-	general: General,
-	classes: Object,
+	classes: Object, // injected by withStyles()
+	theme: Object,
+	content: Content,
+	shouldUpdate: Object,
 };
-// TODO (kurkomisi): If the structure is appropriate, make an abstraction of the common parts with the Header.
-// Footer renders the header of the dashboard.
+
+// Footer renders the footer of the dashboard.
 class Footer extends Component<Props> {
 	shouldComponentUpdate(nextProps) {
-		return typeof nextProps.shouldUpdate.logs !== 'undefined';
+		return typeof nextProps.shouldUpdate.home !== 'undefined';
 	}
 
-	info = (about: string, data: string) => (
-		<Typography type="caption" color="inherit">
-			<span className={this.props.classes.light}>{about}</span> {data}
+	// info renders a label with the given values.
+	info = (about: string, value: ?string) => (value ? (
+		<Typography type='caption' color='inherit'>
+			<span style={commonStyles.light}>{about}</span> {value}
 		</Typography>
-	);
+	) : null);
+
+	// doubleChart renders a pair of charts separated by the baseline.
+	doubleChart = (syncId, topChart, bottomChart) => {
+		const topKey = 'topKey';
+		const bottomKey = 'bottomKey';
+		const topDefault = topChart.default ? topChart.default : 0;
+		const bottomDefault = bottomChart.default ? bottomChart.default : 0;
+		const topTooltip = topChart.tooltip ? (
+			<Tooltip cursor={false} content={<CustomTooltip tooltip={topChart.tooltip} />} />
+		) : null;
+		const bottomTooltip = bottomChart.tooltip ? (
+			<Tooltip cursor={false} content={<CustomTooltip tooltip={bottomChart.tooltip} />} />
+		) : null;
+		const topColor = '#8884d8';
+		const bottomColor = '#82ca9d';
+
+		// Put the samples of the two charts into the same array in order to avoid problems
+		// at the synchronized area charts. If one of the two arrays doesn't have value at
+		// a given position, give it a 0 default value.
+		let data = [...topChart.data.map(({value}) => {
+			const d = {};
+			d[topKey] = value || topDefault;
+			return d;
+		})];
+		for (let i = 0; i < data.length && i < bottomChart.data.length; i++) {
+			// The value needs to be negative in order to plot it upside down.
+			const d = bottomChart.data[i];
+			data[i][bottomKey] = d && d.value ? -d.value : bottomDefault;
+		}
+		data = [...data, ...bottomChart.data.slice(data.length).map(({value}) => {
+			const d = {};
+			d[topKey] = topDefault;
+			d[bottomKey] = -value || bottomDefault;
+			return d;
+		})];
+
+		return (
+			<div style={styles.doubleChartWrapper}>
+				<ResponsiveContainer width='100%' height='50%'>
+					<AreaChart data={data} syncId={syncId} >
+						{topTooltip}
+						<Area type='monotone' dataKey={topKey} stroke={topColor} fill={topColor} />
+					</AreaChart>
+				</ResponsiveContainer>
+				<div style={{marginTop: -10, width: '100%', height: '50%'}}>
+					<ResponsiveContainer width='100%' height='100%'>
+						<AreaChart data={data} syncId={syncId} >
+							{bottomTooltip}
+							<Area type='monotone' dataKey={bottomKey} stroke={bottomColor} fill={bottomColor} />
+						</AreaChart>
+					</ResponsiveContainer>
+				</div>
+			</div>
+		);
+	}
 
 	render() {
-		const {classes, general} = this.props; // The classes property is injected by withStyles().
-		const geth = general.version ? this.info('Geth', general.version) : null;
-		const commit = general.commit ? this.info('Commit', general.commit.substring(0, 7)) : null;
+		const {content} = this.props;
+		const {general, home} = content;
 
 		return (
-			<AppBar position="static" className={classes.footer}>
-				<Toolbar className={classes.toolbar}>
-					<div>
-						{geth}
-						{commit}
-					</div>
-				</Toolbar>
-			</AppBar>
+			<Grid container className={this.props.classes.footer} direction='row' alignItems='center' style={styles.footer}>
+				<Grid item xs style={styles.chartRowWrapper}>
+					<ChartRow>
+						{this.doubleChart(
+							'all',
+							{data: home.processCPU, tooltip: percentPlotter('Process')},
+							{data: home.systemCPU, tooltip: percentPlotter('System', multiplier(-1))},
+						)}
+						{this.doubleChart(
+							'all',
+							{data: home.activeMemory, tooltip: bytePlotter('Active')},
+							{data: home.virtualMemory, tooltip: bytePlotter('Virtual', multiplier(-1))},
+						)}
+						{this.doubleChart(
+							'all',
+							{data: home.diskRead, tooltip: bytePerSecPlotter('Disk Read')},
+							{data: home.diskWrite, tooltip: bytePerSecPlotter('Disk Write', multiplier(-1))},
+						)}
+						{this.doubleChart(
+							'all',
+							{data: home.networkIngress, tooltip: bytePerSecPlotter('Download')},
+							{data: home.networkEgress, tooltip: bytePerSecPlotter('Upload', multiplier(-1))},
+						)}
+					</ChartRow>
+				</Grid>
+				<Grid item >
+					{this.info('Geth', general.version)}
+					{this.info('Commit', general.commit ? general.commit.substring(0, 7) : null)}
+				</Grid>
+			</Grid>
 		);
 	}
 }
 
-export default withStyles(styles)(Footer);
+export default withStyles(themeStyles)(Footer);
diff --git a/dashboard/assets/components/Header.jsx b/dashboard/assets/components/Header.jsx
index e29507bef..e91885af3 100644
--- a/dashboard/assets/components/Header.jsx
+++ b/dashboard/assets/components/Header.jsx
@@ -26,18 +26,22 @@ import IconButton from 'material-ui/IconButton';
 import Typography from 'material-ui/Typography';
 import ChevronLeftIcon from 'material-ui-icons/ChevronLeft';
 
-import {DURATION} from './Common';
+import {DURATION} from '../common';
 
-// arrowDefault is the default style of the arrow button.
-const arrowDefault = {
-	transition: `transform ${DURATION}ms`,
-};
-// arrowTransition is the additional style of the arrow button corresponding to the transition's state.
-const arrowTransition = {
-	entered: {transform: 'rotate(180deg)'},
+// styles contains the constant styles of the component.
+const styles = {
+	arrow: {
+		default: {
+			transition: `transform ${DURATION}ms`,
+		},
+		transition: {
+			entered: {transform: 'rotate(180deg)'},
+		},
+	},
 };
-// Styles for the Header component.
-const styles = theme => ({
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = (theme: Object) => ({
 	header: {
 		backgroundColor: theme.palette.background.appBar,
 		color:           theme.palette.getContrastText(theme.palette.background.appBar),
@@ -47,53 +51,45 @@ const styles = theme => ({
 		paddingLeft:  theme.spacing.unit,
 		paddingRight: theme.spacing.unit,
 	},
-	mainText: {
+	title: {
 		paddingLeft: theme.spacing.unit,
 	},
 });
+
 export type Props = {
-	classes: Object,
+	classes: Object, // injected by withStyles()
 	opened: boolean,
-	openSideBar: () => {},
-	closeSideBar: () => {},
+	switchSideBar: () => void,
 };
+
 // Header renders the header of the dashboard.
 class Header extends Component<Props> {
 	shouldComponentUpdate(nextProps) {
 		return nextProps.opened !== this.props.opened;
 	}
 
-	// changeSideBar opens or closes the sidebar corresponding to the previous state.
-	changeSideBar = () => {
-		if (this.props.opened) {
-			this.props.closeSideBar();
-		} else {
-			this.props.openSideBar();
-		}
-	};
-
-	// arrowButton is connected to the sidebar; changes its state.
-	arrowButton = (transitionState: string) => (
-		<IconButton onClick={this.changeSideBar}>
+	// arrow renders a button, which changes the sidebar's state.
+	arrow = (transitionState: string) => (
+		<IconButton onClick={this.props.switchSideBar}>
 			<ChevronLeftIcon
 				style={{
-					...arrowDefault,
-					...arrowTransition[transitionState],
+					...styles.arrow.default,
+					...styles.arrow.transition[transitionState],
 				}}
 			/>
 		</IconButton>
 	);
 
 	render() {
-		const {classes, opened} = this.props; // The classes property is injected by withStyles().
+		const {classes, opened} = this.props;
 
 		return (
-			<AppBar position="static" className={classes.header}>
+			<AppBar position='static' className={classes.header}>
 				<Toolbar className={classes.toolbar}>
 					<Transition mountOnEnter in={opened} timeout={{enter: DURATION}}>
-						{this.arrowButton}
+						{this.arrow}
 					</Transition>
-					<Typography type="title" color="inherit" noWrap className={classes.mainText}>
+					<Typography type='title' color='inherit' noWrap className={classes.title}>
 						Go Ethereum Dashboard
 					</Typography>
 				</Toolbar>
@@ -102,4 +98,4 @@ class Header extends Component<Props> {
 	}
 }
 
-export default withStyles(styles)(Header);
+export default withStyles(themeStyles)(Header);
diff --git a/dashboard/assets/components/Home.jsx b/dashboard/assets/components/Home.jsx
deleted file mode 100644
index f9fd7bf46..000000000
--- a/dashboard/assets/components/Home.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-// @flow
-
-// Copyright 2017 The go-ethereum Authors
-// This file is part of the go-ethereum library.
-//
-// The go-ethereum library is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Lesser General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// The go-ethereum library is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Lesser General Public License for more details.
-//
-// You should have received a copy of the GNU Lesser General Public License
-// along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>.
-
-import React, {Component} from 'react';
-
-import withTheme from 'material-ui/styles/withTheme';
-import {LineChart, AreaChart, Area, YAxis, CartesianGrid, Line} from 'recharts';
-
-import ChartGrid from './ChartGrid';
-import type {ChartEntry} from '../types/content';
-
-export type Props = {
-    theme: Object,
-    memory: Array<ChartEntry>,
-    traffic: Array<ChartEntry>,
-	shouldUpdate: Object,
-};
-// Home renders the home content.
-class Home extends Component<Props> {
-	constructor(props: Props) {
-		super(props);
-		const {theme} = props; // The theme property is injected by withTheme().
-		this.memoryColor = theme.palette.primary[300];
-		this.trafficColor = theme.palette.secondary[300];
-	}
-
-	shouldComponentUpdate(nextProps) {
-		return typeof nextProps.shouldUpdate.home !== 'undefined';
-	}
-
-	memoryColor: Object;
-	trafficColor: Object;
-
-	render() {
-		let {memory, traffic} = this.props;
-		memory = memory.map(({value}) => (value || 0));
-		traffic = traffic.map(({value}) => (value || 0));
-
-		return (
-			<ChartGrid spacing={24}>
-				<AreaChart xs={6} height={300} values={memory}>
-					<YAxis />
-					<Area type="monotone" dataKey="value" stroke={this.memoryColor} fill={this.memoryColor} />
-				</AreaChart>
-				<LineChart xs={6} height={300} values={traffic}>
-					<Line type="monotone" dataKey="value" stroke={this.trafficColor} dot={false} />
-				</LineChart>
-				<LineChart xs={6} height={300} values={memory}>
-					<YAxis />
-					<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-					<Line type="monotone" dataKey="value" stroke={this.memoryColor} dot={false} />
-				</LineChart>
-				<AreaChart xs={6} height={300} values={traffic}>
-					<CartesianGrid stroke="#eee" strokeDasharray="5 5" vertical={false} />
-					<Area type="monotone" dataKey="value" stroke={this.trafficColor} fill={this.trafficColor} />
-				</AreaChart>
-			</ChartGrid>
-		);
-	}
-}
-
-export default withTheme()(Home);
diff --git a/dashboard/assets/components/Main.jsx b/dashboard/assets/components/Main.jsx
index 6f1668a29..a9e3d3578 100644
--- a/dashboard/assets/components/Main.jsx
+++ b/dashboard/assets/components/Main.jsx
@@ -20,25 +20,38 @@ import React, {Component} from 'react';
 
 import withStyles from 'material-ui/styles/withStyles';
 
-import Home from './Home';
-import {MENU} from './Common';
+import {MENU} from '../common';
+import Footer from './Footer';
 import type {Content} from '../types/content';
 
-// Styles for the Content component.
-const styles = theme => ({
+// styles contains the constant styles of the component.
+const styles = {
+	wrapper: {
+		display:       'flex',
+		flexDirection: 'column',
+		width:         '100%',
+	},
+	content: {
+		flex:     1,
+		overflow: 'auto',
+	},
+};
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = theme => ({
 	content: {
-		flexGrow:        1,
 		backgroundColor: theme.palette.background.default,
 		padding:         theme.spacing.unit * 3,
-		overflow:        'auto',
 	},
 });
+
 export type Props = {
 	classes: Object,
 	active: string,
 	content: Content,
 	shouldUpdate: Object,
 };
+
 // Main renders the chosen content.
 class Main extends Component<Props> {
 	render() {
@@ -49,8 +62,6 @@ class Main extends Component<Props> {
 		let children = null;
 		switch (active) {
 		case MENU.get('home').id:
-			children = <Home memory={content.home.memory} traffic={content.home.traffic} shouldUpdate={shouldUpdate} />;
-			break;
 		case MENU.get('chain').id:
 		case MENU.get('txpool').id:
 		case MENU.get('network').id:
@@ -61,8 +72,16 @@ class Main extends Component<Props> {
 			children = <div>{content.logs.log.map((log, index) => <div key={index}>{log}</div>)}</div>;
 		}
 
-		return <div className={classes.content}>{children}</div>;
+		return (
+			<div style={styles.wrapper}>
+				<div className={classes.content} style={styles.content}>{children}</div>
+				<Footer
+					content={content}
+					shouldUpdate={shouldUpdate}
+				/>
+			</div>
+		);
 	}
 }
 
-export default withStyles(styles)(Main);
+export default withStyles(themeStyles)(Main);
diff --git a/dashboard/assets/components/SideBar.jsx b/dashboard/assets/components/SideBar.jsx
index 319e6f305..c2e419ae9 100644
--- a/dashboard/assets/components/SideBar.jsx
+++ b/dashboard/assets/components/SideBar.jsx
@@ -24,18 +24,22 @@ import Icon from 'material-ui/Icon';
 import Transition from 'react-transition-group/Transition';
 import {Icon as FontAwesome} from 'react-fa';
 
-import {MENU, DURATION} from './Common';
+import {MENU, DURATION} from '../common';
 
-// menuDefault is the default style of the menu.
-const menuDefault = {
-	transition: `margin-left ${DURATION}ms`,
-};
-// menuTransition is the additional style of the menu corresponding to the transition's state.
-const menuTransition = {
-	entered: {marginLeft: -200},
+// styles contains the constant styles of the component.
+const styles = {
+	menu: {
+		default: {
+			transition: `margin-left ${DURATION}ms`,
+		},
+		transition: {
+			entered: {marginLeft: -200},
+		},
+	},
 };
-// Styles for the SideBar component.
-const styles = theme => ({
+
+// themeStyles returns the styles generated from the theme for the component.
+const themeStyles = theme => ({
 	list: {
 		background: theme.palette.background.appBar,
 	},
@@ -46,38 +50,32 @@ const styles = theme => ({
 		fontSize: theme.spacing.unit * 3,
 	},
 });
+
 export type Props = {
-	classes: Object,
+	classes: Object, // injected by withStyles()
 	opened: boolean,
-	changeContent: () => {},
+	changeContent: string => void,
 };
+
 // SideBar renders the sidebar of the dashboard.
 class SideBar extends Component<Props> {
-	constructor(props) {
-		super(props);
-
-		// clickOn contains onClick event functions for the menu items.
-		// Instantiate only once, and reuse the existing functions to prevent the creation of
-		// new function instances every time the render method is triggered.
-		this.clickOn = {};
-		MENU.forEach((menu) => {
-			this.clickOn[menu.id] = (event) => {
-				event.preventDefault();
-				props.changeContent(menu.id);
-			};
-		});
-	}
-
 	shouldComponentUpdate(nextProps) {
 		return nextProps.opened !== this.props.opened;
 	}
 
+	// clickOn returns a click event handler function for the given menu item.
+	clickOn = menu => (event) => {
+		event.preventDefault();
+		this.props.changeContent(menu);
+	};
+
+	// menuItems returns the menu items corresponding to the sidebar state.
 	menuItems = (transitionState) => {
 		const {classes} = this.props;
 		const children = [];
 		MENU.forEach((menu) => {
-			children.push(
-				<ListItem button key={menu.id} onClick={this.clickOn[menu.id]} className={classes.listItem}>
+			children.push((
+				<ListItem button key={menu.id} onClick={this.clickOn(menu.id)} className={classes.listItem}>
 					<ListItemIcon>
 						<Icon className={classes.icon}>
 							<FontAwesome name={menu.icon} />
@@ -86,29 +84,25 @@ class SideBar extends Component<Props> {
 					<ListItemText
 						primary={menu.title}
 						style={{
-							...menuDefault,
-							...menuTransition[transitionState],
+							...styles.menu.default,
+							...styles.menu.transition[transitionState],
 							padding: 0,
 						}}
 					/>
-				</ListItem>,
-			);
+				</ListItem>
+			));
 		});
 		return children;
 	};
 
 	// menu renders the list of the menu items.
-	menu = (transitionState) => {
-		const {classes} = this.props; // The classes property is injected by withStyles().
-
-		return (
-			<div className={classes.list}>
-				<List>
-					{this.menuItems(transitionState)}
-				</List>
-			</div>
-		);
-	};
+	menu = (transitionState: Object) => (
+		<div className={this.props.classes.list}>
+			<List>
+				{this.menuItems(transitionState)}
+			</List>
+		</div>
+	);
 
 	render() {
 		return (
@@ -119,4 +113,4 @@ class SideBar extends Component<Props> {
 	}
 }
 
-export default withStyles(styles)(SideBar);
+export default withStyles(themeStyles)(SideBar);
diff --git a/dashboard/assets/index.jsx b/dashboard/assets/index.jsx
index e10095baf..4ee567b01 100644
--- a/dashboard/assets/index.jsx
+++ b/dashboard/assets/index.jsx
@@ -24,18 +24,18 @@ import createMuiTheme from 'material-ui/styles/createMuiTheme';
 
 import Dashboard from './components/Dashboard';
 
-const theme = createMuiTheme({
-    palette: {
-        type: 'dark',
-    },
+const theme: Object = createMuiTheme({
+	palette: {
+		type: 'dark',
+	},
 });
 const dashboard = document.getElementById('dashboard');
 if (dashboard) {
-    // Renders the whole dashboard.
-    render(
-        <MuiThemeProvider theme={theme}>
-            <Dashboard />
-        </MuiThemeProvider>,
-        dashboard,
-    );
+	// Renders the whole dashboard.
+	render(
+		<MuiThemeProvider theme={theme}>
+			<Dashboard />
+		</MuiThemeProvider>,
+		dashboard,
+	);
 }
diff --git a/dashboard/assets/package-lock.json b/dashboard/assets/package-lock.json
index e84f15a86..a70fda6d5 100644
--- a/dashboard/assets/package-lock.json
+++ b/dashboard/assets/package-lock.json
@@ -3,9 +3,9 @@
     "lockfileVersion": 1,
     "dependencies": {
         "@babel/code-frame": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.31.tgz",
-            "integrity": "sha512-yd7CkUughvHQoEahQqcMdrZw6o/6PwUxiRkfZuVDVHCDe77mysD/suoNyk5mK6phTnRW1kyIbPHyCJgxw++LXg==",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz",
+            "integrity": "sha512-sW77BFwJ48YvQp3Gzz5xtAUiXuYOL2aMJKDwiaY3OcvdqBFurtYfOpSa4QrNyDxmOGRFSYzUpabU2m9QrlWE7w==",
             "requires": {
                 "chalk": "2.3.0",
                 "esutils": "2.0.2",
@@ -41,61 +41,60 @@
             }
         },
         "@babel/helper-function-name": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz",
-            "integrity": "sha512-c+DAyp8LMm2nzSs2uXEuxp4LYGSUYEyHtU3fU57avFChjsnTmmpWmXj2dv0yUxHTEydgVAv5fIzA+4KJwoqWDA==",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz",
+            "integrity": "sha512-/SGPOyifPf20iTrMN+WdlY2MbKa7/o4j7B/4IAsdOusASp2icT+Wcdjf4tjJHaXNX8Pe9bpgVxLNxhRvcf8E5w==",
             "requires": {
-                "@babel/helper-get-function-arity": "7.0.0-beta.31",
-                "@babel/template": "7.0.0-beta.31",
-                "@babel/traverse": "7.0.0-beta.31",
-                "@babel/types": "7.0.0-beta.31"
+                "@babel/helper-get-function-arity": "7.0.0-beta.36",
+                "@babel/template": "7.0.0-beta.36",
+                "@babel/types": "7.0.0-beta.36"
             }
         },
         "@babel/helper-get-function-arity": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz",
-            "integrity": "sha512-m7rVVX/dMLbbB9NCzKYRrrFb0qZxgpmQ4Wv6y7zEsB6skoJHRuXVeb/hAFze79vXBbuD63ci7AVHXzAdZSk9KQ==",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.36.tgz",
+            "integrity": "sha512-vPPcx2vsSoDbcyWr9S3nd0FM3B4hEXnt0p1oKpwa08GwK0fSRxa98MyaRGf8suk8frdQlG1P3mDrz5p/Rr3pbA==",
             "requires": {
-                "@babel/types": "7.0.0-beta.31"
+                "@babel/types": "7.0.0-beta.36"
             }
         },
         "@babel/template": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.31.tgz",
-            "integrity": "sha512-97IRmLvoDhIDSQkqklVt3UCxJsv0LUEVb/0DzXWtc8Lgiyxj567qZkmTG9aR21CmcJVVIvq2Y/moZj4oEpl5AA==",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.36.tgz",
+            "integrity": "sha512-mUBi90WRyZ9iVvlWLEdeo8gn/tROyJdjKNC4W5xJTSZL+9MS89rTJSqiaJKXIkxk/YRDL/g/8snrG/O0xl33uA==",
             "requires": {
-                "@babel/code-frame": "7.0.0-beta.31",
-                "@babel/types": "7.0.0-beta.31",
-                "babylon": "7.0.0-beta.31",
+                "@babel/code-frame": "7.0.0-beta.36",
+                "@babel/types": "7.0.0-beta.36",
+                "babylon": "7.0.0-beta.36",
                 "lodash": "4.17.4"
             },
             "dependencies": {
                 "babylon": {
-                    "version": "7.0.0-beta.31",
-                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.31.tgz",
-                    "integrity": "sha512-6lm2mV3S51yEnKmQQNnswoABL1U1H1KHoCCVwdwI3hvIv+W7ya4ki7Aw4o4KxtUHjNKkK5WpZb22rrMMOcJXJQ=="
+                    "version": "7.0.0-beta.36",
+                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.36.tgz",
+                    "integrity": "sha512-rw4YdadGwajAMMRl6a5swhQ0JCOOFyaYCfJ0AsmNBD8uBD/r4J8mux7wBaqavvFKqUKQYWOzA1Speams4YDzsQ=="
                 }
             }
         },
         "@babel/traverse": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.31.tgz",
-            "integrity": "sha512-3N+VJW+KlezEjFBG7WSYeMyC5kIqVLPb/PGSzCDPFcJrnArluD1GIl7Y3xC7cjKiTq2/JohaLWHVPjJWHlo9Gg==",
-            "requires": {
-                "@babel/code-frame": "7.0.0-beta.31",
-                "@babel/helper-function-name": "7.0.0-beta.31",
-                "@babel/types": "7.0.0-beta.31",
-                "babylon": "7.0.0-beta.31",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.36.tgz",
+            "integrity": "sha512-OTUb6iSKVR/98dGThRJ1BiyfwbuX10BVnkz89IpaerjTPRhDfMBfLsqmzxz5MiywUOW4M0Clta0o7rSxkfcuzw==",
+            "requires": {
+                "@babel/code-frame": "7.0.0-beta.36",
+                "@babel/helper-function-name": "7.0.0-beta.36",
+                "@babel/types": "7.0.0-beta.36",
+                "babylon": "7.0.0-beta.36",
                 "debug": "3.1.0",
-                "globals": "10.4.0",
+                "globals": "11.1.0",
                 "invariant": "2.2.2",
                 "lodash": "4.17.4"
             },
             "dependencies": {
                 "babylon": {
-                    "version": "7.0.0-beta.31",
-                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.31.tgz",
-                    "integrity": "sha512-6lm2mV3S51yEnKmQQNnswoABL1U1H1KHoCCVwdwI3hvIv+W7ya4ki7Aw4o4KxtUHjNKkK5WpZb22rrMMOcJXJQ=="
+                    "version": "7.0.0-beta.36",
+                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.36.tgz",
+                    "integrity": "sha512-rw4YdadGwajAMMRl6a5swhQ0JCOOFyaYCfJ0AsmNBD8uBD/r4J8mux7wBaqavvFKqUKQYWOzA1Speams4YDzsQ=="
                 },
                 "debug": {
                     "version": "3.1.0",
@@ -106,16 +105,16 @@
                     }
                 },
                 "globals": {
-                    "version": "10.4.0",
-                    "resolved": "https://registry.npmjs.org/globals/-/globals-10.4.0.tgz",
-                    "integrity": "sha512-uNUtxIZpGyuaq+5BqGGQHsL4wUlJAXRqOm6g3Y48/CWNGTLONgBibI0lh6lGxjR2HljFYUfszb+mk4WkgMntsA=="
+                    "version": "11.1.0",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-11.1.0.tgz",
+                    "integrity": "sha512-uEuWt9mqTlPDwSqi+sHjD4nWU/1N+q0fiWI9T1mZpD2UENqX20CFD5T/ziLZvztPaBKl7ZylUi1q6Qfm7E2CiQ=="
                 }
             }
         },
         "@babel/types": {
-            "version": "7.0.0-beta.31",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.31.tgz",
-            "integrity": "sha512-exAHB+NeFGxkfQ5dSUD03xl3zYGneeSk2Mw2ldTt/nTvYxuDiuSp3DlxgUBgzbdTFG4fbwPk0WtKWOoTXCmNGg==",
+            "version": "7.0.0-beta.36",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.36.tgz",
+            "integrity": "sha512-PyAORDO9um9tfnrddXgmWN9e6Sq9qxraQIt5ynqBOSXKA5qvK1kUr+Q3nSzKFdzorsiK+oqcUnAFvEoKxv9D+Q==",
             "requires": {
                 "esutils": "2.0.2",
                 "lodash": "4.17.4",
@@ -129,10 +128,28 @@
                 }
             }
         },
+        "@types/jss": {
+            "version": "9.3.0",
+            "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.3.0.tgz",
+            "integrity": "sha512-n7MUYCO/Wt4d6Yj0ZewXSSkqBcrdLFgpQ4mUBRXBWDmLfXtgT3tJ26GVPr8HiyRLLze6iQfaBJTlvjRTjgZpRg=="
+        },
+        "@types/react": {
+            "version": "16.0.34",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.34.tgz",
+            "integrity": "sha512-Ee66fX2qMsDnDq7sPnDtq1bGoo479j6Fo1BlSnne+L5rp6ndzBUgz72+MRNuN56zg9uuteRCkJAMdDJEX2Uqig=="
+        },
+        "@types/react-transition-group": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.6.tgz",
+            "integrity": "sha512-mVhRv+d0MIoLWl6hEFA7Nnd/obW2RQpZViTAKhM37mltuTDWCdoj8xAZv94ntB8wgAc6DDiDCXxFXPgClGnsfQ==",
+            "requires": {
+                "@types/react": "16.0.34"
+            }
+        },
         "acorn": {
-            "version": "5.2.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
-            "integrity": "sha512-jG0u7c4Ly+3QkkW18V+NRDN+4bWHdln30NL1ZL2AvFZZmQe/BfopYCtghCKKVBUSetZ4QKcyA0pY6/4Gw8Pv8w=="
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz",
+            "integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug=="
         },
         "acorn-dynamic-import": {
             "version": "2.0.2",
@@ -342,7 +359,7 @@
             "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
             "requires": {
                 "browserslist": "1.7.7",
-                "caniuse-db": "1.0.30000784",
+                "caniuse-db": "1.0.30000793",
                 "normalize-range": "0.1.2",
                 "num2fraction": "1.2.2",
                 "postcss": "5.2.18",
@@ -354,8 +371,8 @@
                     "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
                     "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
                     "requires": {
-                        "caniuse-db": "1.0.30000784",
-                        "electron-to-chromium": "1.3.30"
+                        "caniuse-db": "1.0.30000793",
+                        "electron-to-chromium": "1.3.31"
                     }
                 }
             }
@@ -415,20 +432,22 @@
             }
         },
         "babel-eslint": {
-            "version": "8.0.3",
-            "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.0.3.tgz",
-            "integrity": "sha512-7D4iUpylEiKJPGbeSAlNddGcmA41PadgZ6UAb6JVyh003h3d0EbZusYFBR/+nBgqtaVJM2J2zUVa3N0hrpMH6g==",
-            "requires": {
-                "@babel/code-frame": "7.0.0-beta.31",
-                "@babel/traverse": "7.0.0-beta.31",
-                "@babel/types": "7.0.0-beta.31",
-                "babylon": "7.0.0-beta.31"
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.1.tgz",
+            "integrity": "sha512-RzdVOyWKQRUnLXhwLk+eKb4oyW+BykZSkpYwFhM4tnfzAG5OWfvG0w/uyzMp5XKEU0jN82+JefHr39bG2+KhRQ==",
+            "requires": {
+                "@babel/code-frame": "7.0.0-beta.36",
+                "@babel/traverse": "7.0.0-beta.36",
+                "@babel/types": "7.0.0-beta.36",
+                "babylon": "7.0.0-beta.36",
+                "eslint-scope": "3.7.1",
+                "eslint-visitor-keys": "1.0.0"
             },
             "dependencies": {
                 "babylon": {
-                    "version": "7.0.0-beta.31",
-                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.31.tgz",
-                    "integrity": "sha512-6lm2mV3S51yEnKmQQNnswoABL1U1H1KHoCCVwdwI3hvIv+W7ya4ki7Aw4o4KxtUHjNKkK5WpZb22rrMMOcJXJQ=="
+                    "version": "7.0.0-beta.36",
+                    "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.36.tgz",
+                    "integrity": "sha512-rw4YdadGwajAMMRl6a5swhQ0JCOOFyaYCfJ0AsmNBD8uBD/r4J8mux7wBaqavvFKqUKQYWOzA1Speams4YDzsQ=="
                 }
             }
         },
@@ -1139,9 +1158,9 @@
                 "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
                 "babel-plugin-transform-exponentiation-operator": "6.24.1",
                 "babel-plugin-transform-regenerator": "6.26.0",
-                "browserslist": "2.10.0",
+                "browserslist": "2.11.3",
                 "invariant": "2.2.2",
-                "semver": "5.4.1"
+                "semver": "5.5.0"
             }
         },
         "babel-preset-flow": {
@@ -1394,7 +1413,7 @@
             "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
             "requires": {
                 "bn.js": "4.11.8",
-                "randombytes": "2.0.5"
+                "randombytes": "2.0.6"
             }
         },
         "browserify-sign": {
@@ -1420,12 +1439,12 @@
             }
         },
         "browserslist": {
-            "version": "2.10.0",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.10.0.tgz",
-            "integrity": "sha512-WyvzSLsuAVPOjbljXnyeWl14Ae+ukAT8MUuagKVzIDvwBxl4UAwD1xqtyQs2eWYPGUKMeC3Ol62goqYuKqTTcw==",
+            "version": "2.11.3",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+            "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
             "requires": {
-                "caniuse-lite": "1.0.30000784",
-                "electron-to-chromium": "1.3.30"
+                "caniuse-lite": "1.0.30000792",
+                "electron-to-chromium": "1.3.31"
             }
         },
         "buffer": {
@@ -1482,7 +1501,7 @@
             "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
             "requires": {
                 "browserslist": "1.7.7",
-                "caniuse-db": "1.0.30000784",
+                "caniuse-db": "1.0.30000793",
                 "lodash.memoize": "4.1.2",
                 "lodash.uniq": "4.5.0"
             },
@@ -1492,21 +1511,21 @@
                     "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
                     "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
                     "requires": {
-                        "caniuse-db": "1.0.30000784",
-                        "electron-to-chromium": "1.3.30"
+                        "caniuse-db": "1.0.30000793",
+                        "electron-to-chromium": "1.3.31"
                     }
                 }
             }
         },
         "caniuse-db": {
-            "version": "1.0.30000784",
-            "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000784.tgz",
-            "integrity": "sha1-G+lQEtlInHcZB0+BruV9vf/mNhs="
+            "version": "1.0.30000793",
+            "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000793.tgz",
+            "integrity": "sha1-PADGbkI6ehkHx92Wdpp4sq+opy4="
         },
         "caniuse-lite": {
-            "version": "1.0.30000784",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000784.tgz",
-            "integrity": "sha1-EpztdOmhKApEGIC2zSvOMO9Z5sA="
+            "version": "1.0.30000792",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
+            "integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI="
         },
         "caseless": {
             "version": "0.12.0",
@@ -1800,7 +1819,7 @@
                 "cipher-base": "1.0.4",
                 "inherits": "2.0.3",
                 "ripemd160": "2.0.1",
-                "sha.js": "2.4.9"
+                "sha.js": "2.4.10"
             }
         },
         "create-hmac": {
@@ -1813,7 +1832,7 @@
                 "inherits": "2.0.3",
                 "ripemd160": "2.0.1",
                 "safe-buffer": "5.1.1",
-                "sha.js": "2.4.9"
+                "sha.js": "2.4.10"
             }
         },
         "cross-spawn": {
@@ -1863,7 +1882,7 @@
                 "inherits": "2.0.3",
                 "pbkdf2": "3.0.14",
                 "public-encrypt": "4.0.0",
-                "randombytes": "2.0.5",
+                "randombytes": "2.0.6",
                 "randomfill": "1.0.3"
             }
         },
@@ -1873,9 +1892,9 @@
             "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
         },
         "css-loader": {
-            "version": "0.28.7",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz",
-            "integrity": "sha512-GxMpax8a/VgcfRrVy0gXD6yLd5ePYbXX/5zGgTVYp4wXtJklS8Z2VaUArJgc//f6/Dzil7BaJObdSv8eKKCPgg==",
+            "version": "0.28.9",
+            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.9.tgz",
+            "integrity": "sha512-r3dgelMm/mkPz5Y7m9SeiGE46i2VsEU/OYbez+1llfxtv8b2y5/b5StaeEvPK3S5tlNQI+tDW/xDIhKJoZgDtw==",
             "requires": {
                 "babel-code-frame": "6.26.0",
                 "css-selector-tokenizer": "0.7.0",
@@ -1885,7 +1904,7 @@
                 "lodash.camelcase": "4.3.0",
                 "object-assign": "4.1.1",
                 "postcss": "5.2.18",
-                "postcss-modules-extract-imports": "1.1.0",
+                "postcss-modules-extract-imports": "1.2.0",
                 "postcss-modules-local-by-default": "1.2.0",
                 "postcss-modules-scope": "1.1.0",
                 "postcss-modules-values": "1.3.0",
@@ -1981,7 +2000,7 @@
             "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
             "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
             "requires": {
-                "es5-ext": "0.10.37"
+                "es5-ext": "0.10.38"
             }
         },
         "d3-array": {
@@ -2000,9 +2019,9 @@
             "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
         },
         "d3-format": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.1.tgz",
-            "integrity": "sha512-U4zRVLDXW61bmqoo+OJ/V687e1T5nVd3TAKAJKgtpZ/P1JsMgyod0y9br+mlQOryTAACdiXI3wCjuERHFNp91w=="
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+            "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
         },
         "d3-interpolate": {
             "version": "1.1.6",
@@ -2025,7 +2044,7 @@
                 "d3-array": "1.2.1",
                 "d3-collection": "1.0.4",
                 "d3-color": "1.0.3",
-                "d3-format": "1.2.1",
+                "d3-format": "1.2.2",
                 "d3-interpolate": "1.1.6",
                 "d3-time": "1.0.8",
                 "d3-time-format": "2.1.1"
@@ -2165,13 +2184,13 @@
             "requires": {
                 "bn.js": "4.11.8",
                 "miller-rabin": "4.0.1",
-                "randombytes": "2.0.5"
+                "randombytes": "2.0.6"
             }
         },
         "doctrine": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.2.tgz",
-            "integrity": "sha512-y0tm5Pq6ywp3qSTZ1vPgVdAnbDEoeoc5wlOHXoY1c4Wug/a7JvqHIl7BTvwodaHmejWkK/9dSb3sCYfyo/om8A==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+            "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
             "requires": {
                 "esutils": "2.0.2"
             }
@@ -2205,18 +2224,10 @@
                 "jsbn": "0.1.1"
             }
         },
-        "electron-releases": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/electron-releases/-/electron-releases-2.1.0.tgz",
-            "integrity": "sha512-cyKFD1bTE/UgULXfaueIN1k5EPFzs+FRc/rvCY5tIynefAPqopQEgjr0EzY+U3Dqrk/G4m9tXSPuZ77v6dL/Rw=="
-        },
         "electron-to-chromium": {
-            "version": "1.3.30",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz",
-            "integrity": "sha512-zx1Prv7kYLfc4OA60FhxGbSo4qrEjgSzpo1/37i7l9ltXPYOoQBtjQxY9KmsgfHnBxHlBGXwLlsbt/gub1w5lw==",
-            "requires": {
-                "electron-releases": "2.1.0"
-            }
+            "version": "1.3.31",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
+            "integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA=="
         },
         "elliptic": {
             "version": "6.4.0",
@@ -2300,9 +2311,9 @@
             }
         },
         "es5-ext": {
-            "version": "0.10.37",
-            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.37.tgz",
-            "integrity": "sha1-DudB0Ui4AGm6J9AgOTdWryV978M=",
+            "version": "0.10.38",
+            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.38.tgz",
+            "integrity": "sha512-jCMyePo7AXbUESwbl8Qi01VSH2piY9s/a3rSU/5w/MlTIx8HPL1xn2InGN8ejt/xulcJgnTO7vqNtOAxzYd2Kg==",
             "requires": {
                 "es6-iterator": "2.0.3",
                 "es6-symbol": "3.1.1"
@@ -2314,7 +2325,7 @@
             "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37",
+                "es5-ext": "0.10.38",
                 "es6-symbol": "3.1.1"
             }
         },
@@ -2324,7 +2335,7 @@
             "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37",
+                "es5-ext": "0.10.38",
                 "es6-iterator": "2.0.3",
                 "es6-set": "0.1.5",
                 "es6-symbol": "3.1.1",
@@ -2337,7 +2348,7 @@
             "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37",
+                "es5-ext": "0.10.38",
                 "es6-iterator": "2.0.3",
                 "es6-symbol": "3.1.1",
                 "event-emitter": "0.3.5"
@@ -2349,7 +2360,7 @@
             "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37"
+                "es5-ext": "0.10.38"
             }
         },
         "es6-weak-map": {
@@ -2358,7 +2369,7 @@
             "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37",
+                "es5-ext": "0.10.38",
                 "es6-iterator": "2.0.3",
                 "es6-symbol": "3.1.1"
             }
@@ -2380,9 +2391,9 @@
             }
         },
         "eslint": {
-            "version": "4.13.1",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.13.1.tgz",
-            "integrity": "sha512-UCJVV50RtLHYzBp1DZ8CMPtRSg4iVZvjgO9IJHIKyWU/AnJVjtdRikoUPLB29n5pzMB7TnsLQWf0V6VUJfoPfw==",
+            "version": "4.16.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.16.0.tgz",
+            "integrity": "sha512-YVXV4bDhNoHHcv0qzU4Meof7/P26B4EuaktMi5L1Tnt52Aov85KmYA8c5D+xyZr/BkhvwUqr011jDSD/QTULxg==",
             "requires": {
                 "ajv": "5.5.2",
                 "babel-code-frame": "6.26.0",
@@ -2390,11 +2401,11 @@
                 "concat-stream": "1.6.0",
                 "cross-spawn": "5.1.0",
                 "debug": "3.1.0",
-                "doctrine": "2.0.2",
+                "doctrine": "2.1.0",
                 "eslint-scope": "3.7.1",
+                "eslint-visitor-keys": "1.0.0",
                 "espree": "3.5.2",
                 "esquery": "1.0.0",
-                "estraverse": "4.2.0",
                 "esutils": "2.0.2",
                 "file-entry-cache": "2.0.0",
                 "functional-red-black-tree": "1.0.1",
@@ -2403,7 +2414,7 @@
                 "ignore": "3.3.7",
                 "imurmurhash": "0.1.4",
                 "inquirer": "3.3.0",
-                "is-resolvable": "1.0.1",
+                "is-resolvable": "1.1.0",
                 "js-yaml": "3.10.0",
                 "json-stable-stringify-without-jsonify": "1.0.1",
                 "levn": "0.3.0",
@@ -2416,7 +2427,7 @@
                 "pluralize": "7.0.0",
                 "progress": "2.0.0",
                 "require-uncached": "1.0.3",
-                "semver": "5.4.1",
+                "semver": "5.5.0",
                 "strip-ansi": "4.0.0",
                 "strip-json-comments": "2.0.1",
                 "table": "4.0.2",
@@ -2508,9 +2519,9 @@
             }
         },
         "eslint-import-resolver-node": {
-            "version": "0.3.1",
-            "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz",
-            "integrity": "sha512-yUtXS15gIcij68NmXmP9Ni77AQuCN0itXbCc/jWd8C6/yKZaSNXicpC8cgvjnxVdmfsosIXrjpzFq7GcDryb6A==",
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
+            "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
             "requires": {
                 "debug": "2.6.9",
                 "resolve": "1.5.0"
@@ -2565,9 +2576,9 @@
             }
         },
         "eslint-plugin-flowtype": {
-            "version": "2.40.1",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.40.1.tgz",
-            "integrity": "sha512-0EBDPR3/iguDQin7nb5WMT1ZWYB95eNllY+oiFZjvLa1oqE0BGO6ZSFnMdNE9HEkajB6Cw850PRIBbp+O+EzYQ==",
+            "version": "2.41.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.0.tgz",
+            "integrity": "sha512-M5X6qu/zvvXQ7flXp9plyBRlNRMQGNl3c+kQmox+m/jpnCZt0txgauxcrBKAVa9LKE/hBnsItJ9BojdmkefAkA==",
             "requires": {
                 "lodash": "4.17.4"
             }
@@ -2581,7 +2592,7 @@
                 "contains-path": "0.1.0",
                 "debug": "2.6.9",
                 "doctrine": "1.5.0",
-                "eslint-import-resolver-node": "0.3.1",
+                "eslint-import-resolver-node": "0.3.2",
                 "eslint-module-utils": "2.1.1",
                 "has": "1.0.1",
                 "lodash.cond": "4.5.2",
@@ -2619,7 +2630,7 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz",
             "integrity": "sha512-YGSjB9Qu6QbVTroUZi66pYky3DfoIPLdHQ/wmrBGyBRnwxQsBXAov9j2rpXt/55i8nyMv6IRWJv2s4d4YnduzQ==",
             "requires": {
-                "doctrine": "2.0.2",
+                "doctrine": "2.1.0",
                 "has": "1.0.1",
                 "jsx-ast-utils": "2.0.1",
                 "prop-types": "15.6.0"
@@ -2639,12 +2650,17 @@
                 "estraverse": "4.2.0"
             }
         },
+        "eslint-visitor-keys": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
+            "integrity": "sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ=="
+        },
         "espree": {
             "version": "3.5.2",
             "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.2.tgz",
             "integrity": "sha512-sadKeYwaR/aJ3stC2CdvgXu1T16TdYN+qwCpcWbMnGJ8s0zNWemzrvb2GbD4OhmJ/fwpJjudThAlLobGbWZbCQ==",
             "requires": {
-                "acorn": "5.2.1",
+                "acorn": "5.3.0",
                 "acorn-jsx": "3.0.1"
             }
         },
@@ -2686,7 +2702,7 @@
             "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
             "requires": {
                 "d": "1.0.0",
-                "es5-ext": "0.10.37"
+                "es5-ext": "0.10.38"
             }
         },
         "events": {
@@ -2890,9 +2906,9 @@
             "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
         },
         "flow-bin": {
-            "version": "0.61.0",
-            "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.61.0.tgz",
-            "integrity": "sha512-w6SGi5CDfKLNGzYssRhW6N37qKclDXijsxDQ5M8c3WbivRYta0Horv22bwakegfKBVDnyeS0lRW3OqBC74eq2g=="
+            "version": "0.63.1",
+            "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.63.1.tgz",
+            "integrity": "sha512-aWKHYs3UECgpwrIDVUiABjSC8dgaKmonymQDWO+6FhGcp9lnnxdDBE6Sfm3F7YaRPfLYsWAY4lndBrfrfyn+9g=="
         },
         "flow-bin-loader": {
             "version": "1.0.2",
@@ -2917,7 +2933,7 @@
                 "mkdirp": "0.5.1",
                 "request": "2.83.0",
                 "rimraf": "2.6.2",
-                "semver": "5.4.1",
+                "semver": "5.5.0",
                 "table": "4.0.2",
                 "through": "2.3.8",
                 "unzip": "0.1.11",
@@ -4059,7 +4075,7 @@
             "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
             "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
             "requires": {
-                "postcss": "6.0.14"
+                "postcss": "6.0.16"
             },
             "dependencies": {
                 "ansi-styles": {
@@ -4078,16 +4094,26 @@
                         "ansi-styles": "3.2.0",
                         "escape-string-regexp": "1.0.5",
                         "supports-color": "4.5.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "4.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+                            "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                            "requires": {
+                                "has-flag": "2.0.0"
+                            }
+                        }
                     }
                 },
                 "postcss": {
-                    "version": "6.0.14",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-                    "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+                    "version": "6.0.16",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+                    "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
                     "requires": {
                         "chalk": "2.3.0",
                         "source-map": "0.6.1",
-                        "supports-color": "4.5.0"
+                        "supports-color": "5.1.0"
                     }
                 },
                 "source-map": {
@@ -4096,9 +4122,9 @@
                     "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
                 },
                 "supports-color": {
-                    "version": "4.5.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-                    "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+                    "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
                     "requires": {
                         "has-flag": "2.0.0"
                     }
@@ -4390,9 +4416,9 @@
             }
         },
         "is-resolvable": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.0.1.tgz",
-            "integrity": "sha512-y5CXYbzvB3jTnWAZH1Nl7ykUWb6T3BcTs56HUruwBf8MhF56n1HWqhDWnVFo8GHrUPDgvUUNVhrc2U8W7iqz5g=="
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+            "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
         },
         "is-retry-allowed": {
             "version": "1.1.0",
@@ -4466,9 +4492,9 @@
             }
         },
         "js-base64": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
-            "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA=="
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.1.tgz",
+            "integrity": "sha512-2h586r2I/CqU7z1aa1kBgWaVAXWAZK+zHnceGi/jFgn7+7VSluxYer/i3xOZVearCxxXvyDkLtTBo+OeJCA3kA=="
         },
         "js-tokens": {
             "version": "3.0.2",
@@ -4545,9 +4571,9 @@
             }
         },
         "jss": {
-            "version": "9.4.0",
-            "resolved": "https://registry.npmjs.org/jss/-/jss-9.4.0.tgz",
-            "integrity": "sha512-ckJpElL5CimehboeLDQoHeY7mlxn0KPnPn2EZVbn6pomhfbTXiQJ6fAJXSp9rUM2hPtE0PG8Swzdy9vhB2v82w==",
+            "version": "9.5.1",
+            "resolved": "https://registry.npmjs.org/jss/-/jss-9.5.1.tgz",
+            "integrity": "sha512-py//ogG1xeztpEDmosJtrkfUXibx3qiAr+1GQvfLHp7azpqkzTPLCnainDgH7Zn0q6S7rcM1eINrVT9n/r5f2w==",
             "requires": {
                 "is-in-browser": "1.1.3",
                 "symbol-observable": "1.1.0",
@@ -4599,9 +4625,9 @@
             }
         },
         "jss-preset-default": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.0.1.tgz",
-            "integrity": "sha512-ZBj1ifZAPDn8iiC9PuB1jDCm/I0Bn53UNL9NHBgOY6AyMorDPgEb3IRjt6H+OHKwnEuCHw8tC/e3/q4I4DgTIw==",
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.1.0.tgz",
+            "integrity": "sha512-C6SyfDg99EFrt0bv0lsg2OEN3e72Fry9/hMPW2sO6MSVsx+vc/Og6TJJY3F2MY5Z/V2/wlARHVmCb3TYMr0zFA==",
             "requires": {
                 "jss-camel-case": "6.0.0",
                 "jss-compose": "5.0.0",
@@ -4611,7 +4637,7 @@
                 "jss-global": "3.0.0",
                 "jss-nested": "6.0.1",
                 "jss-props-sort": "6.0.0",
-                "jss-template": "1.0.0",
+                "jss-template": "1.0.1",
                 "jss-vendor-prefixer": "7.0.0"
             }
         },
@@ -4621,9 +4647,9 @@
             "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
         },
         "jss-template": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.0.tgz",
-            "integrity": "sha512-NFAgcAp8V2fUxffWGGQ5zAolJq3neAvNjmWIwSmy9M6bmXTK9rnTu0fBlAcUh0ALC94B596/2TRphdkE5WRECQ==",
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
+            "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
             "requires": {
                 "warning": "3.0.0"
             }
@@ -4870,25 +4896,32 @@
             }
         },
         "material-ui": {
-            "version": "1.0.0-beta.24",
-            "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-1.0.0-beta.24.tgz",
-            "integrity": "sha512-tPKQeR9RXXSJFj/QIhU5+mAnnZm5Gk6WcTufbVBDd0946wpfMJA2NY2J+M/SK9NXe+BTTVUCnWY92UCw5YA9tA==",
+            "version": "1.0.0-beta.30",
+            "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-1.0.0-beta.30.tgz",
+            "integrity": "sha512-cgUUYf+sXjkUQmImjngHPmwo6kBIfvZKrNxmp56cpATYyaeoBydfERwv9SfUu1zzJyXLhJ6tt17XeUBn8aSqug==",
             "requires": {
+                "@types/jss": "9.3.0",
+                "@types/react-transition-group": "2.0.6",
                 "babel-runtime": "6.26.0",
                 "brcast": "3.0.1",
                 "classnames": "2.2.5",
                 "deepmerge": "2.0.1",
                 "dom-helpers": "3.3.1",
                 "hoist-non-react-statics": "2.3.1",
-                "jss": "9.4.0",
-                "jss-preset-default": "4.0.1",
+                "jss": "9.5.1",
+                "jss-camel-case": "6.0.0",
+                "jss-default-unit": "8.0.2",
+                "jss-global": "3.0.0",
+                "jss-nested": "6.0.1",
+                "jss-props-sort": "6.0.0",
+                "jss-vendor-prefixer": "7.0.0",
                 "keycode": "2.1.9",
                 "lodash": "4.17.4",
                 "normalize-scroll-left": "0.1.2",
                 "prop-types": "15.6.0",
-                "react-event-listener": "0.5.2",
-                "react-jss": "8.2.0",
-                "react-popper": "0.7.4",
+                "react-event-listener": "0.5.3",
+                "react-jss": "8.2.1",
+                "react-popper": "0.7.5",
                 "react-scrollbar-size": "2.0.2",
                 "react-transition-group": "2.2.1",
                 "recompose": "0.26.0",
@@ -5108,7 +5141,7 @@
                 "querystring-es3": "0.2.1",
                 "readable-stream": "2.3.3",
                 "stream-browserify": "2.0.1",
-                "stream-http": "2.7.2",
+                "stream-http": "2.8.0",
                 "string_decoder": "1.0.3",
                 "timers-browserify": "2.0.4",
                 "tty-browserify": "0.0.0",
@@ -5131,7 +5164,7 @@
             "requires": {
                 "hosted-git-info": "2.5.0",
                 "is-builtin-module": "1.0.0",
-                "semver": "5.4.1",
+                "semver": "5.5.0",
                 "validate-npm-package-license": "3.0.1"
             }
         },
@@ -5279,16 +5312,19 @@
             "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
         },
         "p-limit": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.1.0.tgz",
-            "integrity": "sha1-sH/y2aXYi+yAYDWJWiurZqJ5iLw="
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.2.0.tgz",
+            "integrity": "sha512-Y/OtIaXtUPr4/YpMv1pCL5L5ed0rumAaAeBSj12F+bSlMdys7i8oQF/GUJmfpTS/QoaRrS/k6pma29haJpsMng==",
+            "requires": {
+                "p-try": "1.0.0"
+            }
         },
         "p-locate": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
             "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
             "requires": {
-                "p-limit": "1.1.0"
+                "p-limit": "1.2.0"
             }
         },
         "p-timeout": {
@@ -5299,6 +5335,11 @@
                 "p-finally": "1.0.0"
             }
         },
+        "p-try": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+            "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+        },
         "pako": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
@@ -5405,7 +5446,7 @@
                 "create-hmac": "1.1.6",
                 "ripemd160": "2.0.1",
                 "safe-buffer": "5.1.1",
-                "sha.js": "2.4.9"
+                "sha.js": "2.4.10"
             }
         },
         "performance-now": {
@@ -5455,7 +5496,7 @@
             "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
             "requires": {
                 "chalk": "1.1.3",
-                "js-base64": "2.4.0",
+                "js-base64": "2.4.1",
                 "source-map": "0.5.7",
                 "supports-color": "3.2.3"
             },
@@ -5589,8 +5630,8 @@
                     "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
                     "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
                     "requires": {
-                        "caniuse-db": "1.0.30000784",
-                        "electron-to-chromium": "1.3.30"
+                        "caniuse-db": "1.0.30000793",
+                        "electron-to-chromium": "1.3.31"
                     }
                 }
             }
@@ -5642,11 +5683,11 @@
             }
         },
         "postcss-modules-extract-imports": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
-            "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz",
+            "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=",
             "requires": {
-                "postcss": "6.0.14"
+                "postcss": "6.0.16"
             },
             "dependencies": {
                 "ansi-styles": {
@@ -5665,16 +5706,26 @@
                         "ansi-styles": "3.2.0",
                         "escape-string-regexp": "1.0.5",
                         "supports-color": "4.5.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "4.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+                            "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                            "requires": {
+                                "has-flag": "2.0.0"
+                            }
+                        }
                     }
                 },
                 "postcss": {
-                    "version": "6.0.14",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-                    "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+                    "version": "6.0.16",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+                    "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
                     "requires": {
                         "chalk": "2.3.0",
                         "source-map": "0.6.1",
-                        "supports-color": "4.5.0"
+                        "supports-color": "5.1.0"
                     }
                 },
                 "source-map": {
@@ -5683,9 +5734,9 @@
                     "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
                 },
                 "supports-color": {
-                    "version": "4.5.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-                    "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+                    "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
                     "requires": {
                         "has-flag": "2.0.0"
                     }
@@ -5698,7 +5749,7 @@
             "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
             "requires": {
                 "css-selector-tokenizer": "0.7.0",
-                "postcss": "6.0.14"
+                "postcss": "6.0.16"
             },
             "dependencies": {
                 "ansi-styles": {
@@ -5717,16 +5768,26 @@
                         "ansi-styles": "3.2.0",
                         "escape-string-regexp": "1.0.5",
                         "supports-color": "4.5.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "4.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+                            "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                            "requires": {
+                                "has-flag": "2.0.0"
+                            }
+                        }
                     }
                 },
                 "postcss": {
-                    "version": "6.0.14",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-                    "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+                    "version": "6.0.16",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+                    "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
                     "requires": {
                         "chalk": "2.3.0",
                         "source-map": "0.6.1",
-                        "supports-color": "4.5.0"
+                        "supports-color": "5.1.0"
                     }
                 },
                 "source-map": {
@@ -5735,9 +5796,9 @@
                     "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
                 },
                 "supports-color": {
-                    "version": "4.5.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-                    "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+                    "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
                     "requires": {
                         "has-flag": "2.0.0"
                     }
@@ -5750,7 +5811,7 @@
             "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
             "requires": {
                 "css-selector-tokenizer": "0.7.0",
-                "postcss": "6.0.14"
+                "postcss": "6.0.16"
             },
             "dependencies": {
                 "ansi-styles": {
@@ -5769,16 +5830,26 @@
                         "ansi-styles": "3.2.0",
                         "escape-string-regexp": "1.0.5",
                         "supports-color": "4.5.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "4.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+                            "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                            "requires": {
+                                "has-flag": "2.0.0"
+                            }
+                        }
                     }
                 },
                 "postcss": {
-                    "version": "6.0.14",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-                    "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+                    "version": "6.0.16",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+                    "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
                     "requires": {
                         "chalk": "2.3.0",
                         "source-map": "0.6.1",
-                        "supports-color": "4.5.0"
+                        "supports-color": "5.1.0"
                     }
                 },
                 "source-map": {
@@ -5787,9 +5858,9 @@
                     "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
                 },
                 "supports-color": {
-                    "version": "4.5.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-                    "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+                    "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
                     "requires": {
                         "has-flag": "2.0.0"
                     }
@@ -5802,7 +5873,7 @@
             "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
             "requires": {
                 "icss-replace-symbols": "1.1.0",
-                "postcss": "6.0.14"
+                "postcss": "6.0.16"
             },
             "dependencies": {
                 "ansi-styles": {
@@ -5821,16 +5892,26 @@
                         "ansi-styles": "3.2.0",
                         "escape-string-regexp": "1.0.5",
                         "supports-color": "4.5.0"
+                    },
+                    "dependencies": {
+                        "supports-color": {
+                            "version": "4.5.0",
+                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+                            "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                            "requires": {
+                                "has-flag": "2.0.0"
+                            }
+                        }
                     }
                 },
                 "postcss": {
-                    "version": "6.0.14",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-                    "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+                    "version": "6.0.16",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
+                    "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
                     "requires": {
                         "chalk": "2.3.0",
                         "source-map": "0.6.1",
-                        "supports-color": "4.5.0"
+                        "supports-color": "5.1.0"
                     }
                 },
                 "source-map": {
@@ -5839,9 +5920,9 @@
                     "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
                 },
                 "supports-color": {
-                    "version": "4.5.0",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-                    "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
+                    "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
                     "requires": {
                         "has-flag": "2.0.0"
                     }
@@ -6021,7 +6102,7 @@
                 "browserify-rsa": "4.0.1",
                 "create-hash": "1.1.3",
                 "parse-asn1": "5.1.0",
-                "randombytes": "2.0.5"
+                "randombytes": "2.0.6"
             }
         },
         "pullstream": {
@@ -6108,11 +6189,6 @@
                 "global": "4.3.2"
             }
         },
-        "ramda": {
-            "version": "0.25.0",
-            "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
-            "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ=="
-        },
         "randomatic": {
             "version": "1.1.7",
             "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
@@ -6151,9 +6227,9 @@
             }
         },
         "randombytes": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.5.tgz",
-            "integrity": "sha512-8T7Zn1AhMsQ/HI1SjcCfT/t4ii3eAqco3yOcSzS4mozsOz69lHLsoMXmF9nZgnFanYscnSlUSgs8uZyKzpE6kg==",
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.6.tgz",
+            "integrity": "sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==",
             "requires": {
                 "safe-buffer": "5.1.1"
             }
@@ -6163,7 +6239,7 @@
             "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.3.tgz",
             "integrity": "sha512-YL6GrhrWoic0Eq8rXVbMptH7dAxCs0J+mh5Y0euNekPPYaxEmdVGim6GdoxoRzKW2yJoU8tueifS7mYxvcFDEQ==",
             "requires": {
-                "randombytes": "2.0.5",
+                "randombytes": "2.0.6",
                 "safe-buffer": "5.1.1"
             }
         },
@@ -6190,9 +6266,9 @@
             }
         },
         "react-event-listener": {
-            "version": "0.5.2",
-            "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.2.tgz",
-            "integrity": "sha512-E22Sc/PtzVWw/fRidkEy1ZNnpSMJARUVV/5LymsDe4NjIHzNcVpNLV/R2Kt40NN8X6tu/X5p2inCny7vqd97mg==",
+            "version": "0.5.3",
+            "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.3.tgz",
+            "integrity": "sha512-fTGYvhe7eTsqq0m664Km0rxKQcqLIGZWZINmy1LU0fu312tay8Mt3Twq2P5Xj1dfDVvvzT1Ql3/FDkiMPJ1MOg==",
             "requires": {
                 "babel-runtime": "6.26.0",
                 "fbjs": "0.8.16",
@@ -6210,21 +6286,21 @@
             }
         },
         "react-jss": {
-            "version": "8.2.0",
-            "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.2.0.tgz",
-            "integrity": "sha512-GaD9lPMFeNaLGbgrGNVKn8MwqxEULfi2+nuU0chYALK4wivhVJ2qya7UN6UNXzqxb+rjR1rOqdUQejHKCTQRTg==",
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.2.1.tgz",
+            "integrity": "sha512-H1fm32xG8pi4LMHkXjqpLyFOvSDsravd0HI6Dtlb/iyma1tfi7qqqSH2bf0kKyTAJV5hvYL0ls0qvRJWKfDPcA==",
             "requires": {
                 "hoist-non-react-statics": "2.3.1",
-                "jss": "9.4.0",
-                "jss-preset-default": "4.0.1",
+                "jss": "9.5.1",
+                "jss-preset-default": "4.1.0",
                 "prop-types": "15.6.0",
                 "theming": "1.3.0"
             }
         },
         "react-popper": {
-            "version": "0.7.4",
-            "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.7.4.tgz",
-            "integrity": "sha512-dx1fcKYYkidq7f71I1g+YX7g3QBLZ9taqiSRdJ7wbP7v/o7F6JsrUaNWGbVNul+TqdDDIZ5/k0xPUol9baqQJQ==",
+            "version": "0.7.5",
+            "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.7.5.tgz",
+            "integrity": "sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==",
             "requires": {
                 "popper.js": "1.12.9",
                 "prop-types": "15.6.0"
@@ -6245,7 +6321,7 @@
             "requires": {
                 "babel-runtime": "6.26.0",
                 "prop-types": "15.6.0",
-                "react-event-listener": "0.5.2"
+                "react-event-listener": "0.5.3"
             }
         },
         "react-smooth": {
@@ -6317,9 +6393,9 @@
             }
         },
         "recharts": {
-            "version": "1.0.0-beta.7",
-            "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.0.0-beta.7.tgz",
-            "integrity": "sha1-/M+T6vWVH3Q4y3a1pd0P50rVRFA=",
+            "version": "1.0.0-beta.9",
+            "resolved": "https://registry.npmjs.org/recharts/-/recharts-1.0.0-beta.9.tgz",
+            "integrity": "sha1-8A/33Jt7AXyLT2ahC5bzmyDNE1M=",
             "requires": {
                 "classnames": "2.2.5",
                 "core-js": "2.5.1",
@@ -6496,7 +6572,7 @@
                 "stringstream": "0.0.5",
                 "tough-cookie": "2.3.3",
                 "tunnel-agent": "0.6.0",
-                "uuid": "3.1.0"
+                "uuid": "3.2.1"
             }
         },
         "require-directory": {
@@ -6613,9 +6689,9 @@
             }
         },
         "semver": {
-            "version": "5.4.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-            "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+            "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
         },
         "set-blocking": {
             "version": "2.0.0",
@@ -6633,9 +6709,9 @@
             "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
         },
         "sha.js": {
-            "version": "2.4.9",
-            "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.9.tgz",
-            "integrity": "sha512-G8zektVqbiPHrylgew9Zg1VRB1L/DtXNUVAM6q4QLy8NE3qtHlFXTf8VLL4k1Yl6c7NMjtZUTdXV+X44nFaT6A==",
+            "version": "2.4.10",
+            "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.10.tgz",
+            "integrity": "sha512-vnwmrFDlOExK4Nm16J2KMWHLrp14lBrjxMxBJpu++EnsuBmpiYaM/MEs46Vxxm/4FvdP5yTwuCTO9it5FSjrqA==",
             "requires": {
                 "inherits": "2.0.3",
                 "safe-buffer": "5.1.1"
@@ -6785,9 +6861,9 @@
             }
         },
         "stream-http": {
-            "version": "2.7.2",
-            "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz",
-            "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==",
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.0.tgz",
+            "integrity": "sha512-sZOFxI/5xw058XIRHl4dU3dZ+TTOIGJR78Dvo0oEAejIt4ou27k+3ne1zYmCV+v7UucbxIFQuOgnkTVHh8YPnw==",
             "requires": {
                 "builtin-status-codes": "3.0.0",
                 "inherits": "2.0.3",
@@ -7230,9 +7306,9 @@
             "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
         },
         "uuid": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-            "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
+            "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
         },
         "validate-npm-package-license": {
             "version": "3.0.1",
@@ -7289,7 +7365,7 @@
             "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.10.0.tgz",
             "integrity": "sha512-fxxKXoicjdXNUMY7LIdY89tkJJJ0m1Oo8PQutZ5rLgWbV5QVKI15Cn7+/IHnRTd3vfKfiwBx6SBqlorAuNA8LA==",
             "requires": {
-                "acorn": "5.2.1",
+                "acorn": "5.3.0",
                 "acorn-dynamic-import": "2.0.2",
                 "ajv": "5.5.2",
                 "ajv-keywords": "2.1.1",
diff --git a/dashboard/assets/package.json b/dashboard/assets/package.json
index 139dede74..847fd4bc1 100644
--- a/dashboard/assets/package.json
+++ b/dashboard/assets/package.json
@@ -1,7 +1,7 @@
 {
     "dependencies": {
         "babel-core": "^6.26.0",
-        "babel-eslint": "^8.1.2",
+        "babel-eslint": "^8.2.1",
         "babel-loader": "^7.1.2",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-decorators-legacy": "^1.3.4",
@@ -12,8 +12,8 @@
         "babel-preset-stage-0": "^6.24.1",
         "babel-runtime": "^6.26.0",
         "classnames": "^2.2.5",
-        "css-loader": "^0.28.8",
-        "eslint": "^4.15.0",
+        "css-loader": "^0.28.9",
+        "eslint": "^4.16.0",
         "eslint-config-airbnb": "^16.1.0",
         "eslint-loader": "^1.9.0",
         "eslint-plugin-import": "^2.8.0",
@@ -24,16 +24,15 @@
         "flow-bin": "^0.63.1",
         "flow-bin-loader": "^1.0.2",
         "flow-typed": "^2.2.3",
-        "material-ui": "^1.0.0-beta.24",
+        "material-ui": "^1.0.0-beta.30",
         "material-ui-icons": "^1.0.0-beta.17",
         "path": "^0.12.7",
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
         "react-fa": "^5.0.0",
         "react-transition-group": "^2.2.1",
-        "recharts": "^1.0.0-beta.7",
+        "recharts": "^1.0.0-beta.9",
         "style-loader": "^0.19.1",
-        "typeface-roboto": "^0.0.50",
         "url": "^0.11.0",
         "url-loader": "^0.6.2",
         "webpack": "^3.10.0"
diff --git a/dashboard/assets/types/content.jsx b/dashboard/assets/types/content.jsx
index 5e59b002c..546125397 100644
--- a/dashboard/assets/types/content.jsx
+++ b/dashboard/assets/types/content.jsx
@@ -32,8 +32,14 @@ export type General = {
 };
 
 export type Home = {
-	memory: ChartEntries,
-	traffic: ChartEntries,
+	activeMemory: ChartEntries,
+	virtualMemory: ChartEntries,
+	networkIngress: ChartEntries,
+	networkEgress: ChartEntries,
+	processCPU: ChartEntries,
+	systemCPU: ChartEntries,
+	diskRead: ChartEntries,
+	diskWrite: ChartEntries,
 };
 
 export type ChartEntries = Array<ChartEntry>;