diff --git a/ui/src/console/detail/environment/MetricsTab.js b/ui/src/console/detail/environment/MetricsTab.js
index 66e0463a..37e447a0 100644
--- a/ui/src/console/detail/environment/MetricsTab.js
+++ b/ui/src/console/detail/environment/MetricsTab.js
@@ -21,7 +21,7 @@ const MetricsTab = (props) => {
 			.then(resp => {
 				setMetrics1(buildMetrics(resp.data));
 			});
-	}, []);
+	}, [props.selection.id]);
 
 	useEffect(() => {
 		let mounted = true;
@@ -45,7 +45,7 @@ const MetricsTab = (props) => {
 			mounted = false;
 			clearInterval(interval);
 		}
-	}, []);
+	}, [props.selection.id]);
 
 	return (
 		<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
diff --git a/ui/src/console/metrics/MetricsView.js b/ui/src/console/metrics/MetricsView.js
index a34b56f2..5085f878 100644
--- a/ui/src/console/metrics/MetricsView.js
+++ b/ui/src/console/metrics/MetricsView.js
@@ -1,6 +1,6 @@
-import {Col, Container, Row, Tooltip} from "react-bootstrap";
+import {Col, Container, Row} from "react-bootstrap";
 import {bytesToSize} from "./util";
-import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
+import {Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
 import moment from "moment/moment";
 import React from "react";
 
@@ -46,14 +46,13 @@ const MetricsGraph = (props) => {
         <Row>
             <Col>
                 <ResponsiveContainer width={"100%"} height={150}>
-                    <BarChart data={props.metrics.data}>
+                    <AreaChart data={props.metrics.data}>
                         <CartesianGrid strokeDasharay={"3 3"} />
                         <XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
                         <YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
-                        <Bar stroke={"#231069"} fill={"#04adef"} dataKey={(v) => v.rx ? v.rx : 0} />
-                        <Bar stroke={"#231069"} fill={"#9BF316"} dataKey={(v) => v.tx ? v.tx : 0} />
-                        <Tooltip />
-                    </BarChart>
+                        <Area type={"basis"} stroke={"#231069"} fill={"#9BF316"} dataKey={(v) => v.tx ? v.tx : 0} stackId={"1"} />
+                        <Area type={"basis"} stroke={"#231069"} fill={"#04adef"} dataKey={(v) => v.rx ? v.rx : 0} stackId={"1"} />
+                    </AreaChart>
                 </ResponsiveContainer>
             </Col>
         </Row>
diff --git a/ui/src/console/visualizer/Network.js b/ui/src/console/visualizer/Network.js
index c75421c4..8e81ca8d 100644
--- a/ui/src/console/visualizer/Network.js
+++ b/ui/src/console/visualizer/Network.js
@@ -48,6 +48,8 @@ const Network = (props) => {
             case "account":
                 nodeIcon.addPath(accountIcon, xform);
                 break;
+            default:
+                break;
         }
 
         ctx.fill(nodeIcon);