Add first plotting attempts for portfolios

78 files changed, 490 insertions, 713 deletions

diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js
index 03daa692..7efea9b0 100644
--- a/frontend/src/components/app/map/LoadingScreen.js
+++ b/frontend/src/components/app/map/LoadingScreen.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 
 const LoadingScreen = () => (
     <div className="display-4">
-        <FontAwesome name="refresh" className="mr-4" spin/>
+        <FontAwesome name="refresh" className="mr-4" spin />
         Loading your project...
     </div>
 )
diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js
index 286920e2..0a970701 100644
--- a/frontend/src/components/app/map/MapConstants.js
+++ b/frontend/src/components/app/map/MapConstants.js
@@ -5,8 +5,7 @@ export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
 
 export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
 export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
-export const OBJECT_SIZE_IN_PIXELS =
-    TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
 
 export const GRID_LINE_WIDTH_IN_PIXELS = 2
 export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8
diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index f1c2b211..cecb34de 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -43,19 +43,12 @@ class MapStageComponent extends React.Component {
     }
 
     updateDimensions() {
-        this.props.setMapDimensions(
-            jQuery(window).width(),
-            jQuery(window).height() - NAVBAR_HEIGHT,
-        )
+        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT)
     }
 
     updateScale(e) {
         e.preventDefault()
-        this.props.zoomInOnPosition(
-            e.deltaY < 0,
-            this.state.mouseX,
-            this.state.mouseY,
-        )
+        this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
     }
 
     updateMousePosition() {
@@ -83,21 +76,14 @@ class MapStageComponent extends React.Component {
     }
 
     moveWithDelta(deltaX, deltaY) {
-        this.props.setMapPositionWithBoundsCheck(
-            this.props.mapPosition.x + deltaX,
-            this.props.mapPosition.y + deltaY,
-        )
+        this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY)
     }
 
     render() {
         return (
-            <Shortcuts
-                name="MAP"
-                handler={this.handleShortcuts.bind(this)}
-                targetNodeSelector="body"
-            >
+            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
                 <Stage
-                    ref={stage => {
+                    ref={(stage) => {
                         this.stage = stage
                     }}
                     width={this.props.mapDimensions.width}
@@ -105,15 +91,9 @@ class MapStageComponent extends React.Component {
                     onMouseMove={this.updateMousePosition.bind(this)}
                 >
                     <Provider store={store}>
-                        <MapLayer/>
-                        <RoomHoverLayer
-                            mouseX={this.state.mouseX}
-                            mouseY={this.state.mouseY}
-                        />
-                        <ObjectHoverLayer
-                            mouseX={this.state.mouseX}
-                            mouseY={this.state.mouseY}
-                        />
+                        <MapLayer />
+                        <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
+                        <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
             </Shortcuts>
diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
index d166bcc8..8487f47b 100644
--- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
@@ -6,7 +6,7 @@ const ExportCanvasComponent = () => (
         title="Export Canvas to PNG Image"
         onClick={() => window['exportCanvasToImage']()}
     >
-        <span className="fa fa-camera"/>
+        <span className="fa fa-camera" />
     </button>
 )
 
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index daaf8ec6..54709482 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -3,10 +3,7 @@ import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import './ScaleIndicatorComponent.css'
 
 const ScaleIndicatorComponent = ({ scale }) => (
-    <div
-        className="scale-indicator"
-        style={{ width: TILE_SIZE_IN_PIXELS * scale }}
-    >
+    <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
         {TILE_SIZE_IN_METERS}m
     </div>
 )
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e3bb1dbb..e0e4d554 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -5,8 +5,8 @@ import './ToolPanelComponent.css'
 
 const ToolPanelComponent = () => (
     <div className="tool-panel">
-        <ZoomControlContainer/>
-        <ExportCanvasComponent/>
+        <ZoomControlContainer />
+        <ExportCanvasComponent />
     </div>
 )
 
diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js
index bd6527a6..65944bea 100644
--- a/frontend/src/components/app/map/controls/ZoomControlComponent.js
+++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js
@@ -3,21 +3,21 @@ import React from 'react'
 const ZoomControlComponent = ({ zoomInOnCenter }) => {
     return (
         <span>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom in"
-          onClick={() => zoomInOnCenter(true)}
-      >
-        <span className="fa fa-plus"/>
-      </button>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom out"
-          onClick={() => zoomInOnCenter(false)}
-      >
-        <span className="fa fa-minus"/>
-      </button>
-    </span>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom in"
+                onClick={() => zoomInOnCenter(true)}
+            >
+                <span className="fa fa-plus" />
+            </button>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom out"
+                onClick={() => zoomInOnCenter(false)}
+            >
+                <span className="fa fa-minus" />
+            </button>
+        </span>
     )
 }
 
diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js
index 556d6a7b..8ccfe584 100644
--- a/frontend/src/components/app/map/elements/Backdrop.js
+++ b/frontend/src/components/app/map/elements/Backdrop.js
@@ -3,14 +3,6 @@ import { Rect } from 'react-konva'
 import { BACKDROP_COLOR } from '../../../../util/colors'
 import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
 
-const Backdrop = () => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={BACKDROP_COLOR}
-    />
-)
+const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
 
 export default Backdrop
diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js
index 6e56e059..8c573a6f 100644
--- a/frontend/src/components/app/map/elements/RackFillBar.js
+++ b/frontend/src/components/app/map/elements/RackFillBar.js
@@ -21,27 +21,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
     const x =
         positionX * TILE_SIZE_IN_PIXELS +
         OBJECT_MARGIN_IN_PIXELS +
-        (type === 'space'
-            ? halfOfObjectBorderWidth
-            : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
-    const startY =
-        positionY * TILE_SIZE_IN_PIXELS +
-        OBJECT_MARGIN_IN_PIXELS +
-        halfOfObjectBorderWidth
-    const width =
-        0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) -
-        halfOfObjectBorderWidth
-    const fullHeight =
-        TILE_SIZE_IN_PIXELS -
-        OBJECT_MARGIN_IN_PIXELS * 2 -
-        OBJECT_BORDER_WIDTH_IN_PIXELS
+        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
+    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
+    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
+    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
 
     const fractionHeight = fillFraction * fullHeight
     const fractionY =
-        (positionY + 1) * TILE_SIZE_IN_PIXELS -
-        OBJECT_MARGIN_IN_PIXELS -
-        halfOfObjectBorderWidth -
-        fractionHeight
+        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
 
     return (
         <Group>
@@ -50,22 +37,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
                 y={startY}
                 width={width}
                 height={fullHeight}
-                fill={
-                    type === 'space'
-                        ? RACK_SPACE_BAR_BACKGROUND_COLOR
-                        : RACK_ENERGY_BAR_BACKGROUND_COLOR
-                }
+                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
             />
             <Rect
                 x={x}
                 y={fractionY}
                 width={width}
                 height={fractionHeight}
-                fill={
-                    type === 'space'
-                        ? RACK_SPACE_BAR_FILL_COLOR
-                        : RACK_ENERGY_BAR_FILL_COLOR
-                }
+                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
             />
             <ImageComponent
                 src={'/img/topology/rack-' + type + '-icon.png'}
diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js
index dd6e0beb..be3a00a8 100644
--- a/frontend/src/components/app/map/elements/TilePlusIcon.js
+++ b/frontend/src/components/app/map/elements/TilePlusIcon.js
@@ -10,16 +10,12 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
             pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY +
-            TILE_SIZE_IN_PIXELS * mapScale -
-            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
         ],
         [
             pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelX +
-            TILE_SIZE_IN_PIXELS * mapScale -
-            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
         ],
     ]
diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js
index d1ba6157..8aa2aebf 100644
--- a/frontend/src/components/app/map/elements/WallSegment.js
+++ b/frontend/src/components/app/map/elements/WallSegment.js
@@ -22,14 +22,7 @@ const WallSegment = ({ wallSegment }) => {
         ]
     }
 
-    return (
-        <Line
-            points={points}
-            lineCap="round"
-            stroke={WALL_COLOR}
-            strokeWidth={WALL_WIDTH_IN_PIXELS}
-        />
-    )
+    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
 }
 
 WallSegment.propTypes = {
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
index 10554834..ebc00244 100644
--- a/frontend/src/components/app/map/groups/GridGroup.js
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -4,13 +4,13 @@ import { GRID_COLOR } from '../../../../util/colors'
 import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
-const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     0,
     index * TILE_SIZE_IN_PIXELS,
     MAP_SIZE_IN_PIXELS,
     index * TILE_SIZE_IN_PIXELS,
 ])
-const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     index * TILE_SIZE_IN_PIXELS,
     0,
     index * TILE_SIZE_IN_PIXELS,
@@ -19,9 +19,7 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
 
 const GridGroup = () => (
     <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(
-            VERTICAL_POINT_PAIRS,
-        ).map((points, index) => (
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
                 key={index}
                 points={points}
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 5d4ee5e2..eb6dc24a 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -9,22 +9,10 @@ import TileObject from '../elements/TileObject'
 const RackGroup = ({ tile }) => {
     return (
         <Group>
-            <TileObject
-                positionX={tile.positionX}
-                positionY={tile.positionY}
-                color={RACK_BACKGROUND_COLOR}
-            />
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
             <Group>
-                <RackSpaceFillContainer
-                    tileId={tile._id}
-                    positionX={tile.positionX}
-                    positionY={tile.positionY}
-                />
-                <RackEnergyFillContainer
-                    tileId={tile._id}
-                    positionX={tile.positionX}
-                    positionY={tile.positionY}
-                />
+                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
             </Group>
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
index 4e3c7410..1fd54687 100644
--- a/frontend/src/components/app/map/groups/RoomGroup.js
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -5,17 +5,12 @@ import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
 import Shapes from '../../../../shapes/index'
 
-const RoomGroup = ({
-                       room,
-                       interactionLevel,
-                       currentRoomInConstruction,
-                       onClick,
-                   }) => {
+const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
         return (
             <Group onClick={onClick}>
-                {room.tileIds.map(tileId => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                {room.tileIds.map((tileId) => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
                 ))}
             </Group>
         )
@@ -25,26 +20,23 @@ const RoomGroup = ({
         <Group onClick={onClick}>
             {(() => {
                 if (
-                    (interactionLevel.mode === 'RACK' ||
-                        interactionLevel.mode === 'MACHINE') &&
+                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
                     interactionLevel.roomId === room._id
                 ) {
                     return [
                         room.tileIds
-                            .filter(tileId => tileId !== interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
-                        <GrayContainer key={-1}/>,
+                            .filter((tileId) => tileId !== interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                        <GrayContainer key={-1} />,
                         room.tileIds
-                            .filter(tileId => tileId === interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                            .filter((tileId) => tileId === interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
                     ]
                 } else {
-                    return room.tileIds.map(tileId => (
-                        <TileContainer key={tileId} tileId={tileId}/>
-                    ))
+                    return room.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
                 }
             })()}
-            <WallContainer roomId={room._id}/>
+            <WallContainer roomId={room._id} />
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index e984f05b..1e106823 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -9,7 +9,7 @@ import RoomTile from '../elements/RoomTile'
 const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
     let tileObject
     if (tile.rackId) {
-        tileObject = <RackContainer tile={tile}/>
+        tileObject = <RackContainer tile={tile} />
     } else {
         tileObject = null
     }
@@ -21,7 +21,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 
     return (
         <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color}/>
+            <RoomTile tile={tile} color={color} />
             {tileObject}
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/TopologyGroup.js b/frontend/src/components/app/map/groups/TopologyGroup.js
index a40a1d41..6096fc8b 100644
--- a/frontend/src/components/app/map/groups/TopologyGroup.js
+++ b/frontend/src/components/app/map/groups/TopologyGroup.js
@@ -6,14 +6,14 @@ import Shapes from '../../../../shapes/index'
 
 const TopologyGroup = ({ topology, interactionLevel }) => {
     if (!topology) {
-        return <Group/>
+        return <Group />
     }
 
     if (interactionLevel.mode === 'BUILDING') {
         return (
             <Group>
-                {topology.roomIds.map(roomId => (
-                    <RoomContainer key={roomId} roomId={roomId}/>
+                {topology.roomIds.map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
                 ))}
             </Group>
         )
@@ -22,12 +22,16 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
     return (
         <Group>
             {topology.roomIds
-                .filter(roomId => roomId !== interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
+                .filter((roomId) => roomId !== interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
             {topology.roomIds
-                .filter(roomId => roomId === interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+                .filter((roomId) => roomId === interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
index 81c72d94..7b0f5ca0 100644
--- a/frontend/src/components/app/map/groups/WallGroup.js
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -9,7 +9,7 @@ const WallGroup = ({ tiles }) => {
     return (
         <Group>
             {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
+                <WallSegment key={index} wallSegment={wallSegment} />
             ))}
         </Group>
     )
diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
index 25c9c412..bead87de 100644
--- a/frontend/src/components/app/map/layers/HoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -26,18 +26,13 @@ class HoverLayerComponent extends React.Component {
         }
 
         const positionX = Math.floor(
-            (this.props.mouseX - this.props.mapPosition.x) /
-            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+            (this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
         )
         const positionY = Math.floor(
-            (this.props.mouseY - this.props.mapPosition.y) /
-            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+            (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
         )
 
-        if (
-            positionX !== this.state.positionX ||
-            positionY !== this.state.positionY
-        ) {
+        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
             this.setState({
                 positionX,
                 positionY,
@@ -48,15 +43,11 @@ class HoverLayerComponent extends React.Component {
 
     render() {
         if (!this.props.isEnabled()) {
-            return <Layer/>
+            return <Layer />
         }
 
-        const pixelX =
-            this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS +
-            this.props.mapPosition.x
-        const pixelY =
-            this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS +
-            this.props.mapPosition.y
+        const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x
+        const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y
 
         return (
             <Layer opacity={0.6}>
@@ -66,16 +57,15 @@ class HoverLayerComponent extends React.Component {
                     scale={this.props.mapScale}
                     isValid={this.state.validity}
                     onClick={() =>
-                        this.state.validity
-                            ? this.props.onClick(this.state.positionX, this.state.positionY)
-                            : undefined}
+                        this.state.validity ? this.props.onClick(this.state.positionX, this.state.positionY) : undefined
+                    }
                 />
                 {this.props.children
                     ? React.cloneElement(this.props.children, {
-                        pixelX,
-                        pixelY,
-                        scale: this.props.mapScale,
-                    })
+                          pixelX,
+                          pixelY,
+                          scale: this.props.mapScale,
+                      })
                     : undefined}
             </Layer>
         )
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
index 940057f9..8ee14c9c 100644
--- a/frontend/src/components/app/map/layers/MapLayerComponent.js
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -6,15 +6,10 @@ import GridGroup from '../groups/GridGroup'
 
 const MapLayerComponent = ({ mapPosition, mapScale }) => (
     <Layer>
-        <Group
-            x={mapPosition.x}
-            y={mapPosition.y}
-            scaleX={mapScale}
-            scaleY={mapScale}
-        >
-            <Backdrop/>
-            <TopologyContainer/>
-            <GridGroup/>
+        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+            <Backdrop />
+            <TopologyContainer />
+            <GridGroup />
         </Group>
     </Layer>
 )
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
index 31689635..661fc255 100644
--- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 import TilePlusIcon from '../elements/TilePlusIcon'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const ObjectHoverLayerComponent = props => (
+const ObjectHoverLayerComponent = (props) => (
     <HoverLayerComponent {...props}>
         <TilePlusIcon {...props} />
     </HoverLayerComponent>
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
index d3d5e9b2..887e2891 100644
--- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />
+const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} />
 
 export default RoomHoverLayerComponent
diff --git a/frontend/src/components/app/results/MetricChartComponent.js b/frontend/src/components/app/results/MetricChartComponent.js
new file mode 100644
index 00000000..29a4676a
--- /dev/null
+++ b/frontend/src/components/app/results/MetricChartComponent.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import ReactDOM from 'react-dom/server'
+import SvgSaver from 'svgsaver'
+import { VictoryAxis, VictoryChart, VictoryLabel, VictoryLine, VictoryScatter } from 'victory'
+import { convertSecondsToFormattedTime } from '../../../util/date-time'
+
+const MetricChartComponent = ({ data, currentTick }) => {
+    const onExport = () => {
+        const div = document.createElement('div')
+        div.innerHTML = ReactDOM.renderToString(
+            <VictoryChartComponent data={data} currentTick={currentTick} showCurrentTick={false} />
+        )
+        div.firstChild.style = 'font-family: Roboto, Arial, sans-serif; font-size: 10pt;'
+        const svgSaver = new SvgSaver()
+        svgSaver.asSvg(div.firstChild, 'opendc-chart-export-' + Date.now() + '.svg')
+    }
+
+    return (
+        <div className="mt-1" style={{ position: 'relative' }}>
+            <strong>Load over time</strong>
+            <VictoryChartComponent data={data} currentTick={currentTick} showCurrentTick={true} />
+            <ExportChartComponent onExport={onExport} />
+        </div>
+    )
+}
+
+const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
+    <VictoryChart height={250} padding={{ top: 10, bottom: 50, left: 50, right: 50 }}>
+        <VictoryAxis
+            tickFormat={(tick) => convertSecondsToFormattedTime(tick)}
+            fixLabelOverlap={true}
+            label="Simulated Time"
+        />
+        <VictoryAxis dependentAxis label="Load" />
+        <VictoryLine data={data} />
+        <VictoryScatter data={data} />
+        {showCurrentTick ? (
+            <VictoryLine
+                labelComponent={<VictoryLabel renderInPortal angle={90} dy={-5} dx={60} />}
+                data={[
+                    { x: currentTick + 1, y: 0 },
+                    { x: currentTick + 1, y: 1 },
+                ]}
+                labels={(point) =>
+                    point.y === 1 ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick) : ''
+                }
+                style={{
+                    data: { stroke: '#00A6D6', strokeWidth: 4 },
+                    labels: { fill: '#00A6D6' },
+                }}
+            />
+        ) : undefined}
+    </VictoryChart>
+)
+
+const ExportChartComponent = ({ onExport }) => (
+    <button
+        className="btn btn-success btn-circle btn-sm"
+        title="Export Chart to PNG Image"
+        onClick={onExport}
+        style={{ position: 'absolute', top: 0, right: 0 }}
+    >
+        <span className="fa fa-camera" />
+    </button>
+)
+
+export default MetricChartComponent
diff --git a/frontend/src/components/app/results/PortfolioResultsComponent.js b/frontend/src/components/app/results/PortfolioResultsComponent.js
new file mode 100644
index 00000000..8c778098
--- /dev/null
+++ b/frontend/src/components/app/results/PortfolioResultsComponent.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Bar, BarChart, CartesianGrid, ErrorBar, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { AVAILABLE_METRICS, METRIC_NAMES } from '../../../util/available-metrics'
+import { mean, std } from 'mathjs'
+import Shapes from '../../../shapes/index'
+import approx from 'approximate-number'
+
+const PortfolioResultsComponent = ({ portfolio, scenarios }) => {
+    if (!portfolio) {
+        return <div>Loading...</div>
+    }
+
+    const nonFinishedScenarios = scenarios.filter((s) => s.simulation.state !== 'FINISHED')
+
+    if (nonFinishedScenarios.length > 0) {
+        if (nonFinishedScenarios.every((s) => s.simulation.state === 'QUEUED' || s.simulation.state === 'RUNNING')) {
+            return (
+                <div>
+                    <h1>Simulation running...</h1>
+                    <p>{nonFinishedScenarios.length} of the scenarios are still being simulated</p>
+                </div>
+            )
+        }
+        if (nonFinishedScenarios.some((s) => s.simulation.state === 'FAILED')) {
+            return (
+                <div>
+                    <h1>Simulation failed.</h1>
+                    <p>
+                        Try again by creating a new scenario. Please contact the OpenDC team for support, if issues
+                        persist.
+                    </p>
+                </div>
+            )
+        }
+    }
+
+    const dataPerMetric = {}
+
+    AVAILABLE_METRICS.forEach((metric) => {
+        dataPerMetric[metric] = scenarios.map((scenario) => ({
+            name: scenario.name,
+            value: mean(scenario.results[metric]),
+            std: std(scenario.results[metric]),
+        }))
+    })
+
+    return (
+        <div>
+            <h1>Portfolio: {portfolio.name}</h1>
+            <p>Repeats per Scenario: {portfolio.targets.repeatsPerScenario}</p>
+            <div className="row">
+                {AVAILABLE_METRICS.map(metric => (
+                    <div className="col-6" key={metric}>
+                        <h4>{METRIC_NAMES[metric]}</h4>
+                        <ResponsiveContainer aspect={16 / 9} width="100%">
+                            <BarChart data={dataPerMetric[metric]}>
+                                <CartesianGrid strokeDasharray="3 3"/>
+                                <XAxis dataKey="name"/>
+                                <YAxis tickFormatter={tick => approx(tick)}/>
+                                <Tooltip/>
+                                <Bar dataKey="value" fill="#8884d8"/>
+                                <ErrorBar dataKey="std" width={4} strokeWidth={2} stroke="blue" direction="y"/>
+                            </BarChart>
+                        </ResponsiveContainer>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+PortfolioResultsComponent.propTypes = {
+    portfolio: Shapes.Portfolio,
+    scenarios: PropTypes.arrayOf(Shapes.Scenario),
+}
+
+export default PortfolioResultsComponent
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index a47a67c0..e1760d5e 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -10,7 +10,7 @@ class Sidebar extends React.Component {
     }
 
     static defaultProps = {
-        collapsible: true
+        collapsible: true,
     }
 
     state = {
@@ -25,17 +25,10 @@ class Sidebar extends React.Component {
                 })}
                 onClick={() => this.setState({ collapsed: !this.state.collapsed })}
             >
-                {(this.state.collapsed && this.props.isRight) ||
-                (!this.state.collapsed && !this.props.isRight) ? (
-                    <span
-                        className="fa fa-angle-left"
-                        title={this.props.isRight ? 'Expand' : 'Collapse'}
-                    />
+                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? (
+                    <span className="fa fa-angle-left" title={this.props.isRight ? 'Expand' : 'Collapse'} />
                 ) : (
-                    <span
-                        className="fa fa-angle-right"
-                        title={this.props.isRight ? 'Collapse' : 'Expand'}
-                    />
+                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
                 )}
             </div>
         )
@@ -48,7 +41,7 @@ class Sidebar extends React.Component {
                 className={classNames('sidebar p-3 h-100', {
                     'sidebar-right': this.props.isRight,
                 })}
-                onWheel={e => e.stopPropagation()}
+                onWheel={(e) => e.stopPropagation()}
             >
                 {this.props.children}
                 {this.props.collapsible && collapseButton}
diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass
index 02e8940d..b8e15716 100644
--- a/frontend/src/components/app/sidebars/Sidebar.sass
+++ b/frontend/src/components/app/sidebars/Sidebar.sass
@@ -27,7 +27,7 @@
     position: absolute
     top: 0
     left: 0
-    width: 350px
+    width: $side-bar-width
 
     z-index: 100
     background: white
diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
deleted file mode 100644
index ae52891a..00000000
--- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/server'
-import SvgSaver from 'svgsaver'
-import { VictoryAxis, VictoryChart, VictoryLabel, VictoryLine, VictoryScatter } from 'victory'
-import { convertSecondsToFormattedTime } from '../../../../util/date-time'
-
-const LoadChartComponent = ({ data, currentTick }) => {
-    const onExport = () => {
-        const div = document.createElement('div')
-        div.innerHTML = ReactDOM.renderToString(
-            <VictoryChartComponent
-                data={data}
-                currentTick={currentTick}
-                showCurrentTick={false}
-            />,
-        )
-        div.firstChild.style =
-            'font-family: Roboto, Arial, sans-serif; font-size: 10pt;'
-        const svgSaver = new SvgSaver()
-        svgSaver.asSvg(
-            div.firstChild,
-            'opendc-chart-export-' + Date.now() + '.svg',
-        )
-    }
-
-    return (
-        <div className="mt-1" style={{ position: 'relative' }}>
-            <strong>Load over time</strong>
-            <VictoryChartComponent
-                data={data}
-                currentTick={currentTick}
-                showCurrentTick={true}
-            />
-            <ExportChartComponent onExport={onExport}/>
-        </div>
-    )
-}
-
-const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
-    <VictoryChart
-        height={250}
-        padding={{ top: 10, bottom: 50, left: 50, right: 50 }}
-    >
-        <VictoryAxis
-            tickFormat={tick => convertSecondsToFormattedTime(tick)}
-            fixLabelOverlap={true}
-            label="Simulated Time"
-        />
-        <VictoryAxis dependentAxis label="Load"/>
-        <VictoryLine data={data}/>
-        <VictoryScatter data={data}/>
-        {showCurrentTick ? (
-            <VictoryLine
-                labelComponent={
-                    <VictoryLabel renderInPortal angle={90} dy={-5} dx={60}/>
-                }
-                data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
-                labels={point =>
-                    point.y === 1
-                        ? 'Current tick : ' + convertSecondsToFormattedTime(currentTick)
-                        : ''}
-                style={{
-                    data: { stroke: '#00A6D6', strokeWidth: 4 },
-                    labels: { fill: '#00A6D6' },
-                }}
-            />
-        ) : (
-            undefined
-        )}
-    </VictoryChart>
-)
-
-const ExportChartComponent = ({ onExport }) => (
-    <button
-        className="btn btn-success btn-circle btn-sm"
-        title="Export Chart to PNG Image"
-        onClick={onExport}
-        style={{ position: 'absolute', top: 0, right: 0 }}
-    >
-        <span className="fa fa-camera"/>
-    </button>
-)
-
-export default LoadChartComponent
diff --git a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
index a31f11cf..837666af 100644
--- a/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -24,8 +24,11 @@ class PortfolioListComponent extends React.Component {
             <div className="pb-3">
                 <h2>
                     Portfolios
-                    <button className="btn btn-outline-primary float-right" onClick={this.props.onNewPortfolio.bind(this)}>
-                        <FontAwesome name="plus"/>
+                    <button
+                        className="btn btn-outline-primary float-right"
+                        onClick={this.props.onNewPortfolio.bind(this)}
+                    >
+                        <FontAwesome name="plus" />
                     </button>
                 </h2>
 
@@ -33,7 +36,11 @@ class PortfolioListComponent extends React.Component {
                     <div key={portfolio._id}>
                         <div className="row mb-1">
                             <div
-                                className={'col-8 align-self-center ' + (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')}>
+                                className={
+                                    'col-8 align-self-center ' +
+                                    (portfolio._id === this.props.currentPortfolioId ? 'font-weight-bold' : '')
+                                }
+                            >
                                 {portfolio.name}
                             </div>
                             <div className="col-4 text-right">
@@ -48,7 +55,7 @@ class PortfolioListComponent extends React.Component {
                                 />
                             </div>
                         </div>
-                        <ScenarioListContainer portfolioId={portfolio._id}/>
+                        <ScenarioListContainer portfolioId={portfolio._id} />
                     </div>
                 ))}
             </div>
diff --git a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
index b21b012b..aadc451e 100644
--- a/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/project/ProjectSidebarComponent.js
@@ -3,11 +3,11 @@ import Sidebar from '../Sidebar'
 import TopologyListContainer from '../../../../containers/app/sidebars/project/TopologyListContainer'
 import PortfolioListContainer from '../../../../containers/app/sidebars/project/PortfolioListContainer'
 
-const ProjectSidebarComponent = ({collapsible}) => (
-        <Sidebar isRight={false} collapsible={collapsible}>
-            <TopologyListContainer/>
-            <PortfolioListContainer/>
-        </Sidebar>
-    )
+const ProjectSidebarComponent = ({ collapsible }) => (
+    <Sidebar isRight={false} collapsible={collapsible}>
+        <TopologyListContainer />
+        <PortfolioListContainer />
+    </Sidebar>
+)
 
 export default ProjectSidebarComponent
diff --git a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
index 9d2e261e..f44ce77f 100644
--- a/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/frontend/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -24,7 +24,12 @@ class ScenarioListComponent extends React.Component {
             <>
                 {this.props.scenarios.map((scenario, idx) => (
                     <div key={scenario._id} className="row mb-1">
-                        <div className={'col-8 pl-5 align-self-center ' + (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')}>
+                        <div
+                            className={
+                                'col-8 pl-5 align-self-center ' +
+                                (scenario._id === this.props.currentScenarioId ? 'font-weight-bold' : '')
+                            }
+                        >
                             {scenario.name}
                         </div>
                         <div className="col-4 text-right">
@@ -35,14 +40,17 @@ class ScenarioListComponent extends React.Component {
                             />
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => idx !== 0 ? this.onDelete(scenario._id) : undefined}
+                                onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}
                             />
                         </div>
                     </div>
                 ))}
                 <div className="pl-4 mb-2">
-                    <div className="btn btn-outline-primary" onClick={() => this.props.onNewScenario(this.props.portfolioId)}>
-                        <FontAwesome name="plus" className="mr-1"/>
+                    <div
+                        className="btn btn-outline-primary"
+                        onClick={() => this.props.onNewScenario(this.props.portfolioId)}
+                    >
+                        <FontAwesome name="plus" className="mr-1" />
                         New scenario
                     </div>
                 </div>
diff --git a/frontend/src/components/app/sidebars/project/TopologyListComponent.js b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
index b8b41200..498ee26d 100644
--- a/frontend/src/components/app/sidebars/project/TopologyListComponent.js
+++ b/frontend/src/components/app/sidebars/project/TopologyListComponent.js
@@ -26,13 +26,18 @@ class TopologyListComponent extends React.Component {
                 <h2>
                     Topologies
                     <button className="btn btn-outline-primary float-right" onClick={this.props.onNewTopology}>
-                        <FontAwesome name="plus"/>
+                        <FontAwesome name="plus" />
                     </button>
                 </h2>
 
                 {this.props.topologies.map((topology, idx) => (
                     <div key={topology._id} className="row mb-1">
-                        <div className={'col-8 align-self-center ' + (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')}>
+                        <div
+                            className={
+                                'col-8 align-self-center ' +
+                                (topology._id === this.props.currentTopologyId ? 'font-weight-bold' : '')
+                            }
+                        >
                             {topology.name}
                         </div>
                         <div className="col-4 text-right">
@@ -42,7 +47,7 @@ class TopologyListComponent extends React.Component {
                             />
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
-                                onClick={() => idx !== 0 ? this.onDelete(topology._id) : undefined}
+                                onClick={() => (idx !== 0 ? this.onDelete(topology._id) : undefined)}
                             />
                         </div>
                     </div>
diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js
index 1f3051d5..5fb0dc55 100644
--- a/frontend/src/components/app/sidebars/topology/NameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/NameComponent.js
@@ -5,7 +5,7 @@ const NameComponent = ({ name, onEdit }) => (
     <h2>
         {name}
         <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil"/>
+            <FontAwesome name="pencil" />
         </button>
     </h2>
 )
diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
index b1def94b..f5eee36b 100644
--- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -10,16 +10,16 @@ const TopologySidebarComponent = ({ interactionLevel }) => {
 
     switch (interactionLevel.mode) {
         case 'BUILDING':
-            sidebarContent = <BuildingSidebarContainer/>
+            sidebarContent = <BuildingSidebarContainer />
             break
         case 'ROOM':
-            sidebarContent = <RoomSidebarContainer/>
+            sidebarContent = <RoomSidebarContainer />
             break
         case 'RACK':
-            sidebarContent = <RackSidebarContainer/>
+            sidebarContent = <RackSidebarContainer />
             break
         case 'MACHINE':
-            sidebarContent = <MachineSidebarContainer/>
+            sidebarContent = <MachineSidebarContainer />
             break
         default:
             sidebarContent = 'Missing Content'
diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index 4cc87798..eea62f84 100644
--- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,12 +1,11 @@
 import React from 'react'
-import NewRoomConstructionContainer
-    from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
+import NewRoomConstructionContainer from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
 
 const BuildingSidebarComponent = () => {
     return (
         <div>
             <h2>Building</h2>
-            <NewRoomConstructionContainer/>
+            <NewRoomConstructionContainer />
         </div>
     )
 }
diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 75b00c54..fd552c1e 100644
--- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,15 +1,10 @@
 import React from 'react'
 
-const NewRoomConstructionComponent = ({
-                                          onStart,
-                                          onFinish,
-                                          onCancel,
-                                          currentRoomInConstruction,
-                                      }) => {
+const NewRoomConstructionComponent = ({ onStart, onFinish, onCancel, currentRoomInConstruction }) => {
     if (currentRoomInConstruction === '-1') {
         return (
             <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-2"/>
+                <span className="fa fa-plus mr-2" />
                 Construct a new room
             </div>
         )
@@ -17,11 +12,11 @@ const NewRoomConstructionComponent = ({
     return (
         <div>
             <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-2"/>
+                <span className="fa fa-check mr-2" />
                 Finalize new room
             </div>
             <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-2"/>
+                <span className="fa fa-times mr-2" />
                 Cancel construction
             </div>
         </div>
diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index d7ce24bc..70d522b2 100644
--- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToRackComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to rack
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index b9aa6251..37820316 100644
--- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteMachineComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this machine
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 70be6968..992383c4 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,5 @@
 import React from 'react'
 
-const MachineNameComponent = ({ position }) => (
-    <h2>Machine at slot {position}</h2>
-)
+const MachineNameComponent = ({ position }) => <h2>Machine at slot {position}</h2>
 
 export default MachineNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index d78c20eb..02e7b8d4 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -7,10 +7,10 @@ import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/m
 const MachineSidebarComponent = ({ machineId }) => {
     return (
         <div>
-            <MachineNameContainer/>
-            <BackToRackContainer/>
-            <DeleteMachineContainer/>
-            <UnitTabsContainer/>
+            <MachineNameContainer />
+            <BackToRackContainer />
+            <DeleteMachineContainer />
+            <UnitTabsContainer />
         </div>
     )
 }
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 98238de7..d5ecbce3 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -11,11 +11,8 @@ class UnitAddComponent extends React.Component {
         return (
             <div className="form-inline">
                 <div className="form-group w-100">
-                    <select
-                        className="form-control w-75 mr-1"
-                        ref={unitSelect => (this.unitSelect = unitSelect)}
-                    >
-                        {this.props.units.map(unit => (
+                    <select className="form-control w-75 mr-1" ref={(unitSelect) => (this.unitSelect = unitSelect)}>
+                        {this.props.units.map((unit) => (
                             <option value={unit._id} key={unit._id}>
                                 {unit.name}
                             </option>
@@ -24,11 +21,9 @@ class UnitAddComponent extends React.Component {
                     <button
                         type="submit"
                         className="btn btn-outline-primary"
-                        onClick={() =>
-                            this.props.onAdd(this.unitSelect.value)
-                        }
+                        onClick={() => this.props.onAdd(this.unitSelect.value)}
                     >
-                        <span className="fa fa-plus mr-2"/>
+                        <span className="fa fa-plus mr-2" />
                         Add
                     </button>
                 </div>
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index 3953347a..4816ca23 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -21,10 +21,7 @@ class UnitComponent extends React.Component {
                 '<strong>Energy Cons.:</strong> <code>' +
                 this.props.unit.energyConsumptionW +
                 ' W</code>'
-        } else if (
-            this.props.unitType === 'memory' ||
-            this.props.unitType === 'storage'
-        ) {
+        } else if (this.props.unitType === 'memory' || this.props.unitType === 'storage') {
             unitInfo =
                 '<strong>Speed:</strong> <code>' +
                 this.props.unit.speedMbPerS +
@@ -39,9 +36,7 @@ class UnitComponent extends React.Component {
 
         return (
             <li className="d-flex list-group-item justify-content-between align-items-center">
-                <span style={{ maxWidth: '60%' }}>
-                    {this.props.unit.name}
-                </span>
+                <span style={{ maxWidth: '60%' }}>{this.props.unit.name}</span>
                 <span>
                     <span
                         tabIndex="0"
@@ -53,10 +48,7 @@ class UnitComponent extends React.Component {
                         data-content={unitInfo}
                         data-html="true"
                     />
-                    <span
-                        className="btn btn-outline-danger fa fa-trash"
-                        onClick={this.props.onDelete}
-                    />
+                    <span className="btn btn-outline-danger fa fa-trash" onClick={this.props.onDelete} />
                 </span>
             </li>
         )
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
index fcd3e03b..2ade0f6a 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -5,12 +5,7 @@ const UnitListComponent = ({ unitType, unitIds }) => (
     <ul className="list-group mt-1">
         {unitIds.length !== 0 ? (
             unitIds.map((unitId, index) => (
-                <UnitContainer
-                    unitType={unitType}
-                    unitId={unitId}
-                    index={index}
-                    key={index}
-                />
+                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} />
             ))
         ) : (
             <div className="alert alert-info">
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index c774036f..15c89ed5 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -6,12 +6,7 @@ const UnitTabsComponent = () => (
     <div>
         <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
             <li className="nav-item">
-                <a
-                    className="nav-link active"
-                    data-toggle="tab"
-                    href="#cpu-units"
-                    role="tab"
-                >
+                <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">
                     CPU
                 </a>
             </li>
@@ -21,42 +16,32 @@ const UnitTabsComponent = () => (
                 </a>
             </li>
             <li className="nav-item">
-                <a
-                    className="nav-link"
-                    data-toggle="tab"
-                    href="#memory-units"
-                    role="tab"
-                >
+                <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">
                     Memory
                 </a>
             </li>
             <li className="nav-item">
-                <a
-                    className="nav-link"
-                    data-toggle="tab"
-                    href="#storage-units"
-                    role="tab"
-                >
+                <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">
                     Storage
                 </a>
             </li>
         </ul>
         <div className="tab-content">
             <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                <UnitAddContainer unitType="cpu"/>
-                <UnitListContainer unitType="cpu"/>
+                <UnitAddContainer unitType="cpu" />
+                <UnitListContainer unitType="cpu" />
             </div>
             <div className="tab-pane" id="gpu-units" role="tabpanel">
-                <UnitAddContainer unitType="gpu"/>
-                <UnitListContainer unitType="gpu"/>
+                <UnitAddContainer unitType="gpu" />
+                <UnitListContainer unitType="gpu" />
             </div>
             <div className="tab-pane" id="memory-units" role="tabpanel">
-                <UnitAddContainer unitType="memory"/>
-                <UnitListContainer unitType="memory"/>
+                <UnitAddContainer unitType="memory" />
+                <UnitListContainer unitType="memory" />
             </div>
             <div className="tab-pane" id="storage-units" role="tabpanel">
-                <UnitAddContainer unitType="storage"/>
-                <UnitListContainer unitType="storage"/>
+                <UnitAddContainer unitType="storage" />
+                <UnitListContainer unitType="storage" />
             </div>
         </div>
     </div>
diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index 345674d1..c14775bf 100644
--- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToRoomComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to room
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index b1672764..23b0daac 100644
--- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteRackComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this rack
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index 03b44aa6..d7e30f1d 100644
--- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -2,11 +2,9 @@ import React from 'react'
 
 const EmptySlotComponent = ({ position, onAdd }) => (
     <li className="list-group-item d-flex justify-content-between align-items-center">
-    <span className="badge badge-default badge-info mr-1 disabled">
-      {position}
-    </span>
+        <span className="badge badge-default badge-info mr-1 disabled">{position}</span>
         <button className="btn btn-outline-primary" onClick={onAdd}>
-            <span className="fa fa-plus mr-2"/>
+            <span className="fa fa-plus mr-2" />
             Add machine
         </button>
     </li>
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
index cec3c912..caa3dc04 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -12,17 +12,9 @@ const UnitIcon = ({ id, type }) => (
     </div>
 )
 
-const MachineComponent = ({
-                              position,
-                              machine,
-                              onClick,
-                          }) => {
+const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
-        machine.cpuIds.length +
-        machine.gpuIds.length +
-        machine.memoryIds.length +
-        machine.storageIds.length ===
-        0
+        machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
 
     return (
         <li
@@ -32,33 +24,13 @@ const MachineComponent = ({
         >
             <span className="badge badge-default badge-info mr-1">{position}</span>
             <div className="d-inline-flex">
-                {machine.cpuIds.length > 0 ? (
-                    <UnitIcon id="cpu" type="CPU"/>
-                ) : (
-                    undefined
-                )}
-                {machine.gpuIds.length > 0 ? (
-                    <UnitIcon id="gpu" type="GPU"/>
-                ) : (
-                    undefined
-                )}
-                {machine.memoryIds.length > 0 ? (
-                    <UnitIcon id="memory" type="memory"/>
-                ) : (
-                    undefined
-                )}
-                {machine.storageIds.length > 0 ? (
-                    <UnitIcon id="storage" type="storage"/>
-                ) : (
-                    undefined
-                )}
+                {machine.cpuIds.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+                {machine.gpuIds.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+                {machine.memoryIds.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+                {machine.storageIds.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
                 {hasNoUnits ? (
-                    <span className="badge badge-default badge-warning">
-                        Machine with no units
-                    </span>
-                ) : (
-                    undefined
-                )}
+                    <span className="badge badge-default badge-warning">Machine with no units</span>
+                ) : undefined}
             </div>
         </li>
     )
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index a381771c..aa7a4f8f 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -8,15 +8,9 @@ const MachineListComponent = ({ machineIds }) => {
         <ul className="list-group machine-list">
             {machineIds.map((machineId, index) => {
                 if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index + 1}/>
+                    return <EmptySlotContainer key={index} position={index + 1} />
                 } else {
-                    return (
-                        <MachineContainer
-                            key={index}
-                            position={index + 1}
-                            machineId={machineId}
-                        />
-                    )
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId} />
                 }
             })}
         </ul>
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
index 1888b69d..b701909a 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import NameComponent from '../NameComponent'
 
-const RackNameComponent = ({ rackName, onEdit }) => (
-    <NameComponent name={rackName} onEdit={onEdit}/>
-)
+const RackNameComponent = ({ rackName, onEdit }) => <NameComponent name={rackName} onEdit={onEdit} />
 
 export default RackNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index 23e8e743..c04e46d8 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -9,12 +9,12 @@ const RackSidebarComponent = () => {
     return (
         <div className="rack-sidebar-container flex-column">
             <div className="rack-sidebar-header-container">
-                <RackNameContainer/>
-                <BackToRoomContainer/>
-                <DeleteRackContainer/>
+                <RackNameContainer />
+                <BackToRoomContainer />
+                <DeleteRackContainer />
             </div>
             <div className="machine-list-container mt-2">
-                <MachineListContainer/>
+                <MachineListContainer />
             </div>
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 7bd8c2f8..64c0a1f6 100644
--- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BackToBuildingComponent = ({ onClick }) => (
     <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
+        <span className="fa fa-angle-left mr-2" />
         Back to building
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 2be752b5..78417359 100644
--- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 const DeleteRoomComponent = ({ onClick }) => (
     <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-        <span className="fa fa-trash mr-2"/>
+        <span className="fa fa-trash mr-2" />
         Delete this room
     </div>
 )
diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
index 672a191f..857a646f 100644
--- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
@@ -1,15 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-const EditRoomComponent = ({
-                               onEdit,
-                               onFinish,
-                               isEditing,
-                               isInRackConstructionMode,
-                           }) =>
+const EditRoomComponent = ({ onEdit, onFinish, isEditing, isInRackConstructionMode }) =>
     isEditing ? (
         <div className="btn btn-info btn-block" onClick={onFinish}>
-            <span className="fa fa-check mr-2"/>
+            <span className="fa fa-check mr-2" />
             Finish editing room
         </div>
     ) : (
@@ -19,7 +14,7 @@ const EditRoomComponent = ({
             })}
             onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
         >
-            <span className="fa fa-pencil mr-2"/>
+            <span className="fa fa-pencil mr-2" />
             Edit the tiles of this room
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 42b7357b..44566f61 100644
--- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,16 +1,11 @@
 import classNames from 'classnames'
 import React from 'react'
 
-const RackConstructionComponent = ({
-                                       onStart,
-                                       onStop,
-                                       inRackConstructionMode,
-                                       isEditingRoom,
-                                   }) => {
+const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
     if (inRackConstructionMode) {
         return (
             <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2"/>
+                <span className="fa fa-times mr-2" />
                 Stop rack construction
             </div>
         )
@@ -23,7 +18,7 @@ const RackConstructionComponent = ({
             })}
             onClick={() => (isEditingRoom ? undefined : onStart())}
         >
-            <span className="fa fa-plus mr-2"/>
+            <span className="fa fa-plus mr-2" />
             Start rack construction
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
index 409d2eef..d637828e 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import NameComponent from '../NameComponent'
 
-const RoomNameComponent = ({ roomName, onEdit }) => (
-    <NameComponent name={roomName} onEdit={onEdit}/>
-)
+const RoomNameComponent = ({ roomName, onEdit }) => <NameComponent name={roomName} onEdit={onEdit} />
 
 export default RoomNameComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index a23ac381..1bc6533e 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -8,11 +8,11 @@ import RoomNameContainer from '../../../../../containers/app/sidebars/topology/r
 const RoomSidebarComponent = () => {
     return (
         <div>
-            <RoomNameContainer/>
-            <BackToBuildingContainer/>
-            <RackConstructionContainer/>
-            <EditRoomContainer/>
-            <DeleteRoomContainer/>
+            <RoomNameContainer />
+            <BackToBuildingContainer />
+            <RackConstructionContainer />
+            <EditRoomContainer />
+            <DeleteRoomContainer />
         </div>
     )
 }
diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index 1ac2202c..095fb939 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -8,54 +8,44 @@ const ContactSection = () => (
         <div className="row justify-content-center">
             <div className="col-4">
                 <a href="https://github.com/atlarge-research/opendc">
-                    <FontAwesome name="github" size="3x" className="mb-2"/>
-                    <div className="w-100"/>
+                    <FontAwesome name="github" size="3x" className="mb-2" />
+                    <div className="w-100" />
                     atlarge-research/opendc
                 </a>
             </div>
             <div className="col-4">
                 <a href="mailto:opendc@atlarge-research.com">
-                    <FontAwesome name="envelope" size="3x" className="mb-2"/>
-                    <div className="w-100"/>
+                    <FontAwesome name="envelope" size="3x" className="mb-2" />
+                    <div className="w-100" />
                     opendc@atlarge-research.com
                 </a>
             </div>
         </div>
         <div className="row">
             <div className="col text-center">
-                <img
-                    src="img/tudelft-icon.png"
-                    className="img-fluid tudelft-icon"
-                    alt="TU Delft"
-                />
+                <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" />
             </div>
         </div>
         <div className="row">
             <div className="col text-center">
                 A project by the &nbsp;
-                <a
-                    href="http://atlarge.science"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
+                <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer">
                     <strong>@Large Research Group</strong>
-                </a>.
+                </a>
+                .
             </div>
         </div>
         <div className="row">
             <div className="col text-center disclaimer mt-5 small">
-                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2"/>
-                <br/>
-                OpenDC is an experimental tool. Your data may get lost, overwritten, or
-                otherwise become unavailable.
-                <br/>
-                The OpenDC authors should in no way be liable in the event this happens
-                (see our{' '}
+                <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" />
+                <br />
+                OpenDC is an experimental tool. Your data may get lost, overwritten, or otherwise become unavailable.
+                <br />
+                The OpenDC authors should in no way be liable in the event this happens (see our{' '}
                 <strong>
-                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">
-                        license
-                    </a>
-                </strong>). Sorry for the inconvenience.
+                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">license</a>
+                </strong>
+                ). Sorry for the inconvenience.
             </div>
         </div>
     </ContentSection>
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index d519e840..f7af4cd9 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -8,10 +8,8 @@ const JumbotronHeader = () => (
                 <h1>
                     Open<span className="dc">DC</span>
                 </h1>
-                <p className="lead">
-                    Collaborative Datacenter Simulation and Exploration for Everybody
-                </p>
-                <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC"/>
+                <p className="lead">Collaborative Datacenter Simulation and Exploration for Everybody</p>
+                <img src="img/logo.png" className="img-responsive mt-3" alt="OpenDC" />
             </div>
         </div>
     </section>
diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js
index cdbb5a44..60d372f2 100644
--- a/frontend/src/components/home/ModelingSection.js
+++ b/frontend/src/components/home/ModelingSection.js
@@ -13,9 +13,7 @@ const ModelingSection = () => (
         <ul>
             <li>Model DC layout, and room locations and types</li>
             <li>Place racks in rooms and nodes in racks</li>
-            <li>
-                Add real-world CPU, GPU, memory, storage and network units to each node
-            </li>
+            <li>Add real-world CPU, GPU, memory, storage and network units to each node</li>
             <li>Select from diverse scheduling policies</li>
         </ul>
     </ScreenshotSection>
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index fdb55020..d0ff54bd 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -3,26 +3,18 @@ import React from 'react'
 import ContentSection from './ContentSection'
 import './ScreenshotSection.css'
 
-const ScreenshotSection = ({
-                               name,
-                               title,
-                               imageUrl,
-                               caption,
-                               imageIsRight,
-                               children,
-                           }) => (
+const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
         <div className="row">
             <div
-                className={classNames(
-                    'col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left',
-                    { 'order-1': !imageIsRight },
-                )}
+                className={classNames('col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 text-left', {
+                    'order-1': !imageIsRight,
+                })}
             >
                 {children}
             </div>
             <div className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
-                <img src={imageUrl} className="col-12 screenshot" alt={caption}/>
+                <img src={imageUrl} className="col-12 screenshot" alt={caption} />
                 <div className="row text-muted justify-content-center">{caption}</div>
             </div>
         </div>
diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index 0fa21c34..9852cbb8 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -12,10 +12,7 @@ const ModelingSection = () => (
         <h3>Working with OpenDC:</h3>
         <ul>
             <li>Seamlessly switch between construction and simulation modes</li>
-            <li>
-                Choose one of several predefined workloads (Big Data, Bag of Tasks,
-                Hadoop, etc.)
-            </li>
+            <li>Choose one of several predefined workloads (Big Data, Bag of Tasks, Hadoop, etc.)</li>
             <li>Play, pause, and skip around the informative simulation timeline</li>
             <li>Visualize and demo live</li>
         </ul>
diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js
index e547ebe0..e5ed9683 100644
--- a/frontend/src/components/home/StakeholderSection.js
+++ b/frontend/src/components/home/StakeholderSection.js
@@ -18,23 +18,11 @@ const Stakeholder = ({ name, title, subtitle }) => (
 const StakeholderSection = () => (
     <ContentSection name="stakeholders" title="Stakeholders">
         <div className="row justify-content-center">
-            <Stakeholder
-                name="Manager"
-                title="Managers"
-                subtitle="Seeing is deciding"
-            />
-            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts"/>
-            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune"/>
-            <Stakeholder
-                name="Researcher"
-                title="Researchers"
-                subtitle="Understand & design"
-            />
-            <Stakeholder
-                name="Student"
-                title="Students"
-                subtitle="Grasp complex concepts"
-            />
+            <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" />
+            <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" />
+            <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" />
+            <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" />
+            <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" />
         </div>
     </ContentSection>
 )
diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js
index 6823797f..4b6f1e25 100644
--- a/frontend/src/components/home/TeamSection.js
+++ b/frontend/src/components/home/TeamSection.js
@@ -18,11 +18,7 @@ const TeamMember = ({ photoId, name, description }) => (
 const TeamSection = () => (
     <ContentSection name="team" title="Core Team">
         <div className="row justify-content-center">
-            <TeamMember
-                photoId="aiosup"
-                name="Prof. dr. ir. Alexandru Iosup"
-                description="Project Lead"
-            />
+            <TeamMember photoId="aiosup" name="Prof. dr. ir. Alexandru Iosup" description="Project Lead" />
             <TeamMember
                 photoId="gandreadis"
                 name="Georgios Andreadis"
@@ -46,11 +42,7 @@ const TeamSection = () => (
         </div>
         <div className="text-center lead mt-3">
             See{' '}
-            <a
-                target="_blank"
-                href="http://atlarge.science/opendc#team"
-                rel="noopener noreferrer"
-            >
+            <a target="_blank" href="http://atlarge.science/opendc#team" rel="noopener noreferrer">
                 atlarge.science/opendc
             </a>{' '}
             for the full team!
diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js
index 01d55937..c6013c71 100644
--- a/frontend/src/components/home/TechnologiesSection.js
+++ b/frontend/src/components/home/TechnologiesSection.js
@@ -6,33 +6,31 @@ const TechnologiesSection = () => (
     <ContentSection name="technologies" title="Technologies">
         <ul className="list-group text-left">
             <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
-        <span style={{ minWidth: 100 }}>
-          <FontAwesome name="window-maximize" className="mr-2"/>
-          <strong className="">Browser</strong>
-        </span>
+                <span style={{ minWidth: 100 }}>
+                    <FontAwesome name="window-maximize" className="mr-2" />
+                    <strong className="">Browser</strong>
+                </span>
                 <span className="text-right">JavaScript, React, Redux, Konva</span>
             </li>
             <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
-        <span style={{ minWidth: 100 }}>
-          <FontAwesome name="television" className="mr-2"/>
-          <strong>Server</strong>
-        </span>
-                <span className="text-right">
-          Python, Flask, FlaskSocketIO, OpenAPI
-        </span>
+                <span style={{ minWidth: 100 }}>
+                    <FontAwesome name="television" className="mr-2" />
+                    <strong>Server</strong>
+                </span>
+                <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span>
             </li>
             <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
-        <span style={{ minWidth: 100 }}>
-          <FontAwesome name="database" className="mr-2"/>
-          <strong>Database</strong>
-        </span>
+                <span style={{ minWidth: 100 }}>
+                    <FontAwesome name="database" className="mr-2" />
+                    <strong>Database</strong>
+                </span>
                 <span className="text-right">MongoDB</span>
             </li>
             <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
-        <span style={{ minWidth: 100 }}>
-          <FontAwesome name="cogs" className="mr-2"/>
-          <strong>Simulator</strong>
-        </span>
+                <span style={{ minWidth: 100 }}>
+                    <FontAwesome name="cogs" className="mr-2" />
+                    <strong>Simulator</strong>
+                </span>
                 <span className="text-right">Kotlin</span>
             </li>
         </ul>
diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index dd8cea8e..40656dc1 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -33,18 +33,15 @@ class Modal extends React.Component {
 
         // Trigger auto-focus
         jQuery('#' + this.id)
-            .on('shown.bs.modal', function() {
-                jQuery(this)
-                    .find('input')
-                    .first()
-                    .focus()
+            .on('shown.bs.modal', function () {
+                jQuery(this).find('input').first().focus()
             })
             .on('hide.bs.modal', () => {
                 if (this.visible) {
                     this.props.onCancel()
                 }
             })
-            .on('keydown', e => {
+            .on('keydown', (e) => {
                 e.stopPropagation()
             })
     }
@@ -106,19 +103,12 @@ class Modal extends React.Component {
                         </div>
                         <div className="modal-body">{this.props.children}</div>
                         <div className="modal-footer">
-                            <button
-                                type="button"
-                                className="btn btn-secondary"
-                                onClick={this.onCancel.bind(this)}
-                            >
+                            <button type="button" className="btn btn-secondary" onClick={this.onCancel.bind(this)}>
                                 Close
                             </button>
                             <button
                                 type="button"
-                                className={classNames(
-                                    'btn',
-                                    'btn-' + this.props.submitButtonType,
-                                )}
+                                className={classNames('btn', 'btn-' + this.props.submitButtonType)}
                                 onClick={this.onSubmit.bind(this)}
                             >
                                 {this.props.submitButtonText}
diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js
index 8d03e81f..d5edb60b 100644
--- a/frontend/src/components/modals/TextInputModal.js
+++ b/frontend/src/components/modals/TextInputModal.js
@@ -36,18 +36,14 @@ class TextInputModal extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
                 >
                     <div className="form-group">
                         <label className="form-control-label">{this.props.label}</label>
-                        <input
-                            type="text"
-                            className="form-control"
-                            ref={textInput => (this.textInput = textInput)}
-                        />
+                        <input type="text" className="form-control" ref={(textInput) => (this.textInput = textInput)} />
                     </div>
                 </form>
             </Modal>
diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
index ace2d751..2d001302 100644
--- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js
@@ -20,20 +20,17 @@ class NewPortfolioModalComponent extends React.Component {
 
     reset() {
         this.textInput.value = ''
-        AVAILABLE_METRICS.forEach(metric => {
+        AVAILABLE_METRICS.forEach((metric) => {
             this.metricCheckboxes[metric].checked = true
         })
         this.repeatsInput.value = 1
     }
 
     onSubmit() {
-        this.props.callback(
-            this.textInput.value,
-            {
-                enabledMetrics: AVAILABLE_METRICS.filter(metric => this.metricCheckboxes[metric].checked),
-                repeatsPerScenario: parseInt(this.repeatsInput.value),
-            },
-        )
+        this.props.callback(this.textInput.value, {
+            enabledMetrics: AVAILABLE_METRICS.filter((metric) => this.metricCheckboxes[metric].checked),
+            repeatsPerScenario: parseInt(this.repeatsInput.value),
+        })
         this.reset()
     }
 
@@ -51,7 +48,7 @@ class NewPortfolioModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -62,19 +59,19 @@ class NewPortfolioModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
                     <h4>Targets</h4>
                     <h5>Metrics</h5>
                     <div className="form-group">
-                        {AVAILABLE_METRICS.map(metric => (
+                        {AVAILABLE_METRICS.map((metric) => (
                             <div className="form-check" key={metric}>
                                 <label className="form-check-label">
                                     <input
                                         type="checkbox"
                                         className="form-check-input"
-                                        ref={checkbox => (this.metricCheckboxes[metric] = checkbox)}
+                                        ref={(checkbox) => (this.metricCheckboxes[metric] = checkbox)}
                                     />
                                     <code>{metric}</code>
                                 </label>
@@ -87,7 +84,7 @@ class NewPortfolioModalComponent extends React.Component {
                             type="number"
                             className="form-control"
                             required
-                            ref={repeatsInput => (this.repeatsInput = repeatsInput)}
+                            ref={(repeatsInput) => (this.repeatsInput = repeatsInput)}
                         />
                     </div>
                 </form>
diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
index 4c2df2f6..0bb4aeab 100644
--- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js
@@ -36,13 +36,13 @@ class NewScenarioModalComponent extends React.Component {
                 loadSamplingFraction: parseFloat(this.traceLoadInput.value),
             },
             {
-                topologyId: this.topologySelect.value
+                topologyId: this.topologySelect.value,
             },
             {
                 failuresEnabled: this.failuresCheckbox.checked,
                 performanceInterferenceEnabled: this.performanceInterferenceCheckbox.checked,
                 schedulerName: this.schedulerSelect.value,
-            },
+            }
         )
         this.reset()
     }
@@ -61,7 +61,7 @@ class NewScenarioModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -72,17 +72,14 @@ class NewScenarioModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
                     <h4>Trace</h4>
                     <div className="form-group">
                         <label className="form-control-label">Trace</label>
-                        <select
-                            className="form-control"
-                            ref={traceSelect => (this.traceSelect = traceSelect)}
-                        >
-                            {this.props.traces.map(trace => (
+                        <select className="form-control" ref={(traceSelect) => (this.traceSelect = traceSelect)}>
+                            {this.props.traces.map((trace) => (
                                 <option value={trace._id} key={trace._id}>
                                     {trace.name}
                                 </option>
@@ -95,7 +92,7 @@ class NewScenarioModalComponent extends React.Component {
                             type="number"
                             className="form-control"
                             required
-                            ref={traceLoadInput => (this.traceLoadInput = traceLoadInput)}
+                            ref={(traceLoadInput) => (this.traceLoadInput = traceLoadInput)}
                         />
                     </div>
                     <h4>Topology</h4>
@@ -103,9 +100,9 @@ class NewScenarioModalComponent extends React.Component {
                         <label className="form-control-label">Topology</label>
                         <select
                             className="form-control"
-                            ref={topologySelect => (this.topologySelect = topologySelect)}
+                            ref={(topologySelect) => (this.topologySelect = topologySelect)}
                         >
-                            {this.props.topologies.map(topology => (
+                            {this.props.topologies.map((topology) => (
                                 <option value={topology._id} key={topology._id}>
                                     {topology.name}
                                 </option>
@@ -118,7 +115,7 @@ class NewScenarioModalComponent extends React.Component {
                             <input
                                 type="checkbox"
                                 className="form-check-input"
-                                ref={failuresCheckbox => (this.failuresCheckbox = failuresCheckbox)}
+                                ref={(failuresCheckbox) => (this.failuresCheckbox = failuresCheckbox)}
                             />
                             <span className="ml-2">Enable failures</span>
                         </label>
@@ -128,7 +125,9 @@ class NewScenarioModalComponent extends React.Component {
                             <input
                                 type="checkbox"
                                 className="form-check-input"
-                                ref={performanceInterferenceCheckbox => (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)}
+                                ref={(performanceInterferenceCheckbox) =>
+                                    (this.performanceInterferenceCheckbox = performanceInterferenceCheckbox)
+                                }
                             />
                             <span className="ml-2">Enable performance interference</span>
                         </label>
@@ -137,9 +136,9 @@ class NewScenarioModalComponent extends React.Component {
                         <label className="form-control-label">Scheduler</label>
                         <select
                             className="form-control"
-                            ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)}
+                            ref={(schedulerSelect) => (this.schedulerSelect = schedulerSelect)}
                         >
-                            {this.props.schedulers.map(scheduler => (
+                            {this.props.schedulers.map((scheduler) => (
                                 <option value={scheduler.name} key={scheduler.name}>
                                     {scheduler.name}
                                 </option>
diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
index a0d736a1..bbec9ebb 100644
--- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js
@@ -31,10 +31,7 @@ class NewTopologyModalComponent extends React.Component {
     }
 
     onDuplicate() {
-        this.props.onCreateTopology(
-            this.textInput.value,
-            this.originTopology.value,
-        )
+        this.props.onCreateTopology(this.textInput.value, this.originTopology.value)
         this.reset()
     }
 
@@ -52,7 +49,7 @@ class NewTopologyModalComponent extends React.Component {
                 onCancel={this.onCancel.bind(this)}
             >
                 <form
-                    onSubmit={e => {
+                    onSubmit={(e) => {
                         e.preventDefault()
                         this.onSubmit()
                     }}
@@ -63,7 +60,7 @@ class NewTopologyModalComponent extends React.Component {
                             type="text"
                             className="form-control"
                             required
-                            ref={textInput => (this.textInput = textInput)}
+                            ref={(textInput) => (this.textInput = textInput)}
                         />
                     </div>
                     <div className="form-group">
@@ -71,12 +68,12 @@ class NewTopologyModalComponent extends React.Component {
                         <select
                             className="form-control"
                             disabled
-                            ref={originTopology => (this.originTopology = originTopology)}
+                            ref={(originTopology) => (this.originTopology = originTopology)}
                         >
                             <option value={-1} key={-1}>
                                 None - start from scratch
                             </option>
-                            {this.props.topologies.map(topology => (
+                            {this.props.topologies.map((topology) => (
                                 <option value={topology._id} key={topology._id}>
                                     {topology.name}
                                 </option>
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
index 10a2b92c..293049e1 100644
--- a/frontend/src/components/navigation/AppNavbarComponent.js
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -8,7 +8,7 @@ const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
         <NavItem route="/projects">
             <Link className="nav-link" title="My Projects" to="/projects">
-                <FontAwesome name="list" className="mr-2"/>
+                <FontAwesome name="list" className="mr-2" />
                 My Projects
             </Link>
         </NavItem>
@@ -18,9 +18,7 @@ const AppNavbarComponent = ({ project, fullWidth }) => (
                     <span>{project.name}</span>
                 </Link>
             </NavItem>
-        ) : (
-            undefined
-        )}
+        ) : undefined}
     </Navbar>
 )
 
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 4e3f3869..798d1b97 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -12,12 +12,12 @@ const ScrollNavItem = ({ id, name }) => (
 
 const HomeNavbar = () => (
     <Navbar fullWidth={false}>
-        <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
-        <ScrollNavItem id="#modeling" name="Modeling"/>
-        <ScrollNavItem id="#project" name="Project"/>
-        <ScrollNavItem id="#technologies" name="Technologies"/>
-        <ScrollNavItem id="#team" name="Team"/>
-        <ScrollNavItem id="#contact" name="Contact"/>
+        <ScrollNavItem id="#stakeholders" name="Stakeholders" />
+        <ScrollNavItem id="#modeling" name="Modeling" />
+        <ScrollNavItem id="#project" name="Project" />
+        <ScrollNavItem id="#technologies" name="Technologies" />
+        <ScrollNavItem id="#team" name="Team" />
+        <ScrollNavItem id="#contact" name="Contact" />
     </Navbar>
 )
 
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index 905e1ae9..e3de2ec7 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 
 const LogoutButton = ({ onLogout }) => (
     <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
-        <FontAwesome name="power-off" size="lg"/>
+        <FontAwesome name="power-off" size="lg" />
     </Link>
 )
 
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 0ef19ecb..b1f1f7ae 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -9,10 +9,8 @@ import './Navbar.css'
 
 export const NAVBAR_HEIGHT = 60
 
-export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />)
-export const LoggedInSection = withRouter(props => (
-    <LoggedInSectionWithoutRoute {...props} />
-))
+export const NavItem = withRouter((props) => <NavItemWithoutRoute {...props} />)
+export const LoggedInSection = withRouter((props) => <LoggedInSectionWithoutRoute {...props} />)
 
 const GitHubLink = () => (
     <a
@@ -20,19 +18,12 @@ const GitHubLink = () => (
         className="ml-2 mr-3 text-dark"
         style={{ position: 'relative', top: 7 }}
     >
-        <span className="fa fa-github fa-2x"/>
+        <span className="fa fa-github fa-2x" />
     </a>
 )
 
 const NavItemWithoutRoute = ({ route, location, children }) => (
-    <li
-        className={classNames(
-            'nav-item clickable',
-            location.pathname === route ? 'active' : undefined,
-        )}
-    >
-        {children}
-    </li>
+    <li className={classNames('nav-item clickable', location.pathname === route ? 'active' : undefined)}>{children}</li>
 )
 
 const LoggedInSectionWithoutRoute = ({ location }) => (
@@ -48,28 +39,25 @@ const LoggedInSectionWithoutRoute = ({ location }) => (
                 ) : (
                     <NavItem route="/profile" key="profile">
                         <Link className="nav-link" title="My Profile" to="/profile">
-                            <ProfileName/>
+                            <ProfileName />
                         </Link>
                     </NavItem>
                 ),
                 <NavItem route="logout" key="logout">
-                    <Logout/>
+                    <Logout />
                 </NavItem>,
             ]
         ) : (
             <NavItem route="login">
-                <GitHubLink/>
-                <Login visible={true}/>
+                <GitHubLink />
+                <Login visible={true} />
             </NavItem>
         )}
     </ul>
 )
 
 const Navbar = ({ fullWidth, children }) => (
-    <nav
-        className="navbar fixed-top navbar-expand-lg navbar-light bg-faded"
-        id="navbar"
-    >
+    <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-faded" id="navbar">
         <div className={fullWidth ? 'container-fluid' : 'container'}>
             <button
                 className="navbar-toggler navbar-toggler-right"
@@ -80,20 +68,15 @@ const Navbar = ({ fullWidth, children }) => (
                 aria-expanded="false"
                 aria-label="Toggle navigation"
             >
-                <span className="navbar-toggler-icon"/>
+                <span className="navbar-toggler-icon" />
             </button>
-            <Link
-                className="navbar-brand opendc-brand"
-                to="/"
-                title="OpenDC"
-                onClick={() => window.scrollTo(0, 0)}
-            >
-                <img src="/img/logo.png" alt="OpenDC"/>
+            <Link className="navbar-brand opendc-brand" to="/" title="OpenDC" onClick={() => window.scrollTo(0, 0)}>
+                <img src="/img/logo.png" alt="OpenDC" />
             </Link>
 
             <div className="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul className="navbar-nav mr-auto">{children}</ul>
-                <LoggedInSection/>
+                <LoggedInSection />
             </div>
         </div>
     </nav>
diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js
index 9e9cd29c..6783d6a8 100644
--- a/frontend/src/components/not-found/CodeBlock.js
+++ b/frontend/src/components/not-found/CodeBlock.js
@@ -12,8 +12,7 @@ const CodeBlock = () => {
     const charList = textBlock.split('')
 
     // Binary representation of the string "OpenDC!" ;)
-    const binaryString =
-        '01001111011100000110010101101110010001000100001100100001'
+    const binaryString = '01001111011100000110010101101110010001000100001100100001'
 
     let binaryIndex = 0
     for (let i = 0; i < charList.length; i++) {
@@ -23,12 +22,7 @@ const CodeBlock = () => {
         }
     }
 
-    return (
-        <div
-            className="code-block"
-            dangerouslySetInnerHTML={{ __html: textBlock }}
-        />
-    )
+    return <div className="code-block" dangerouslySetInnerHTML={{ __html: textBlock }} />
 }
 
 export default CodeBlock
diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js
index b629d14c..490fd4c7 100644
--- a/frontend/src/components/not-found/TerminalWindow.js
+++ b/frontend/src/components/not-found/TerminalWindow.js
@@ -9,18 +9,22 @@ const TerminalWindow = () => (
         <div className="terminal-header">Terminal -- bash</div>
         <div className="terminal-body">
             <div className="segfault">
-                $ status<br/>
-                opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4<br
-            />
-                opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4<br/>
-                opendc[4270]: STDERR Page does not exist<br/>
+                $ status
+                <br />
+                opendc[4264]: segfault at 0000051497be459d1 err 12 in libopendc.9.0.4
+                <br />
+                opendc[4269]: segfault at 000004234855fc2db err 3 in libopendc.9.0.4
+                <br />
+                opendc[4270]: STDERR Page does not exist
+                <br />
             </div>
-            <CodeBlock/>
+            <CodeBlock />
             <div className="sub-title">
-                Got lost?<BlinkingCursor/>
+                Got lost?
+                <BlinkingCursor />
             </div>
             <Link to="/" className="home-btn">
-                <span className="fa fa-home"/> GET ME BACK TO OPENDC
+                <span className="fa fa-home" /> GET ME BACK TO OPENDC
             </Link>
         </div>
     </div>
diff --git a/frontend/src/components/projects/NewProjectButtonComponent.js b/frontend/src/components/projects/NewProjectButtonComponent.js
index 3ddef5e5..312671c6 100644
--- a/frontend/src/components/projects/NewProjectButtonComponent.js
+++ b/frontend/src/components/projects/NewProjectButtonComponent.js
@@ -4,7 +4,7 @@ import React from 'react'
 const NewProjectButtonComponent = ({ onClick }) => (
     <div className="bottom-btn-container">
         <div className="btn btn-primary float-right" onClick={onClick}>
-            <span className="fa fa-plus mr-2"/>
+            <span className="fa fa-plus mr-2" />
             New Project
         </div>
     </div>
diff --git a/frontend/src/components/projects/ProjectActionButtons.js b/frontend/src/components/projects/ProjectActionButtons.js
index 456dd6b6..1c76cc7f 100644
--- a/frontend/src/components/projects/ProjectActionButtons.js
+++ b/frontend/src/components/projects/ProjectActionButtons.js
@@ -4,26 +4,18 @@ import { Link } from 'react-router-dom'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
-        <Link
-            to={'/projects/' + projectId}
-            className="btn btn-outline-primary btn-sm mr-2"
-            title="Open this project"
-        >
-            <span className="fa fa-play"/>
+        <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
+            <span className="fa fa-play" />
         </Link>
         <div
             className="btn btn-outline-success btn-sm disabled mr-2"
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
-            <span className="fa fa-users"/>
+            <span className="fa fa-users" />
         </div>
-        <div
-            className="btn btn-outline-danger btn-sm"
-            title="Delete this project"
-            onClick={() => onDelete(projectId)}
-        >
-            <span className="fa fa-trash"/>
+        <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
+            <span className="fa fa-trash" />
         </div>
     </td>
 )
diff --git a/frontend/src/components/projects/ProjectAuthList.js b/frontend/src/components/projects/ProjectAuthList.js
index 5a2c6695..8eb4f93b 100644
--- a/frontend/src/components/projects/ProjectAuthList.js
+++ b/frontend/src/components/projects/ProjectAuthList.js
@@ -8,27 +8,23 @@ const ProjectAuthList = ({ authorizations }) => {
         <div className="vertically-expanding-container">
             {authorizations.length === 0 ? (
                 <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2"/>
-                    <strong>No projects here yet...</strong> Add some with the 'New
-                    Project' button!
+                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <strong>No projects here yet...</strong> Add some with the 'New Project' button!
                 </div>
             ) : (
                 <table className="table table-striped">
                     <thead>
-                    <tr>
-                        <th>Project name</th>
-                        <th>Last edited</th>
-                        <th>Access rights</th>
-                        <th/>
-                    </tr>
+                        <tr>
+                            <th>Project name</th>
+                            <th>Last edited</th>
+                            <th>Access rights</th>
+                            <th />
+                        </tr>
                     </thead>
                     <tbody>
-                    {authorizations.map(authorization => (
-                        <ProjectAuthRow
-                            projectAuth={authorization}
-                            key={authorization.project._id}
-                        />
-                    ))}
+                        {authorizations.map((authorization) => (
+                            <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
+                        ))}
                     </tbody>
                 </table>
             )}
diff --git a/frontend/src/components/projects/ProjectAuthRow.js b/frontend/src/components/projects/ProjectAuthRow.js
index be9de6e0..3f904061 100644
--- a/frontend/src/components/projects/ProjectAuthRow.js
+++ b/frontend/src/components/projects/ProjectAuthRow.js
@@ -8,20 +8,12 @@ import { parseAndFormatDateTime } from '../../util/date-time'
 const ProjectAuthRow = ({ projectAuth }) => (
     <tr>
         <td className="pt-3">{projectAuth.project.name}</td>
+        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
         <td className="pt-3">
-            {parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}
-        </td>
-        <td className="pt-3">
-      <span
-          className={classNames(
-              'fa',
-              'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel],
-              'mr-2',
-          )}
-      />
+            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
             {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
         </td>
-        <ProjectActions projectId={projectAuth.project._id}/>
+        <ProjectActions projectId={projectAuth.project._id} />
     </tr>
 )