Manually generate IDs

author: Georgios Andreadis <info@gandreadis.com> 2020-07-01 13:33:31 +0200
committer: Fabian Mastenbroek <mail.fabianm@gmail.com> 2020-08-24 19:47:17 +0200
commit: de8f12d74faef5fa3f9e38d1340948cab2d06ea3 (patch)
tree: 678bf1af3e5fa2334f0df43388d45294785bbf1e /frontend/src/components
parent: 44236756c4cf689806dc17c6950a2cff3e9227bf (diff)
110 files changed, 3039 insertions, 3067 deletions
diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js
index 9f379e0b..ca159982 100644
--- a/frontend/src/components/app/map/LoadingScreen.js
+++ b/frontend/src/components/app/map/LoadingScreen.js
@@ -1,11 +1,11 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
 
 const LoadingScreen = () => (
-  <div className="display-4">
-    <FontAwesome name="refresh" className="mr-4" spin />
-    Loading your datacenter...
-  </div>
-);
+    <div className="display-4">
+        <FontAwesome name="refresh" className="mr-4" spin/>
+        Loading your datacenter...
+    </div>
+)
 
-export default LoadingScreen;
+export default LoadingScreen
diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js
index 32438b5e..286920e2 100644
--- a/frontend/src/components/app/map/MapConstants.js
+++ b/frontend/src/components/app/map/MapConstants.js
@@ -1,29 +1,29 @@
-export const MAP_SIZE = 50;
-export const TILE_SIZE_IN_PIXELS = 100;
-export const TILE_SIZE_IN_METERS = 0.5;
-export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS;
+export const MAP_SIZE = 50
+export const TILE_SIZE_IN_PIXELS = 100
+export const TILE_SIZE_IN_METERS = 0.5
+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_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;
+    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;
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12;
-export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
+export const GRID_LINE_WIDTH_IN_PIXELS = 2
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12
+export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10
 
-export const SIDEBAR_WIDTH = 350;
-export const VIEWPORT_PADDING = 50;
+export const SIDEBAR_WIDTH = 350
+export const VIEWPORT_PADDING = 50
 
-export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3;
-export const RACK_FILL_ICON_OPACITY = 0.8;
+export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3
+export const RACK_FILL_ICON_OPACITY = 0.8
 
-export const MAP_MOVE_PIXELS_PER_EVENT = 20;
-export const MAP_SCALE_PER_EVENT = 1.1;
-export const MAP_MIN_SCALE = 0.5;
-export const MAP_MAX_SCALE = 1.5;
+export const MAP_MOVE_PIXELS_PER_EVENT = 20
+export const MAP_SCALE_PER_EVENT = 1.1
+export const MAP_MIN_SCALE = 0.5
+export const MAP_MAX_SCALE = 1.5
 
-export const MAX_NUM_UNITS_PER_MACHINE = 4;
-export const DEFAULT_RACK_SLOT_CAPACITY = 42;
-export const DEFAULT_RACK_POWER_CAPACITY = 10000;
+export const MAX_NUM_UNITS_PER_MACHINE = 4
+export const DEFAULT_RACK_SLOT_CAPACITY = 42
+export const DEFAULT_RACK_POWER_CAPACITY = 10000
diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index 67b3349c..455604e4 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -1,126 +1,126 @@
-import React from "react";
-import { Stage } from "react-konva";
-import { Shortcuts } from "react-shortcuts";
-import MapLayer from "../../../containers/app/map/layers/MapLayer";
-import ObjectHoverLayer from "../../../containers/app/map/layers/ObjectHoverLayer";
-import RoomHoverLayer from "../../../containers/app/map/layers/RoomHoverLayer";
-import jQuery from "../../../util/jquery";
-import { NAVBAR_HEIGHT } from "../../navigation/Navbar";
-import { MAP_MOVE_PIXELS_PER_EVENT } from "./MapConstants";
-import { Provider } from "react-redux";
-import { store } from "../../../store/configure-store";
+import React from 'react'
+import { Stage } from 'react-konva'
+import { Shortcuts } from 'react-shortcuts'
+import MapLayer from '../../../containers/app/map/layers/MapLayer'
+import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer'
+import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer'
+import jQuery from '../../../util/jquery'
+import { NAVBAR_HEIGHT } from '../../navigation/Navbar'
+import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants'
+import { Provider } from 'react-redux'
+import { store } from '../../../store/configure-store'
 
 class MapStageComponent extends React.Component {
-  state = {
-    mouseX: 0,
-    mouseY: 0
-  };
+    state = {
+        mouseX: 0,
+        mouseY: 0,
+    }
 
-  constructor(props) {
-    super(props);
+    constructor(props) {
+        super(props)
 
-    this.updateDimensions = this.updateDimensions.bind(this);
-    this.updateScale = this.updateScale.bind(this);
-  }
+        this.updateDimensions = this.updateDimensions.bind(this)
+        this.updateScale = this.updateScale.bind(this)
+    }
 
-  componentWillMount() {
-    this.updateDimensions();
-  }
+    componentWillMount() {
+        this.updateDimensions()
+    }
 
-  componentDidMount() {
-    window.addEventListener("resize", this.updateDimensions);
-    window.addEventListener("wheel", this.updateScale);
+    componentDidMount() {
+        window.addEventListener('resize', this.updateDimensions)
+        window.addEventListener('wheel', this.updateScale)
 
-    window["exportCanvasToImage"] = () => {
-      const download = document.createElement("a");
-      download.href = this.stage.getStage().toDataURL();
-      download.download = "opendc-canvas-export-" + Date.now() + ".png";
-      download.click();
-    };
-  }
+        window['exportCanvasToImage'] = () => {
+            const download = document.createElement('a')
+            download.href = this.stage.getStage().toDataURL()
+            download.download = 'opendc-canvas-export-' + Date.now() + '.png'
+            download.click()
+        }
+    }
 
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateDimensions);
-    window.removeEventListener("wheel", this.updateScale);
-  }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateDimensions)
+        window.removeEventListener('wheel', this.updateScale)
+    }
 
-  updateDimensions() {
-    this.props.setMapDimensions(
-      jQuery(window).width(),
-      jQuery(window).height() - NAVBAR_HEIGHT
-    );
-  }
+    updateDimensions() {
+        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
-    );
-  }
+    updateScale(e) {
+        e.preventDefault()
+        this.props.zoomInOnPosition(
+            e.deltaY < 0,
+            this.state.mouseX,
+            this.state.mouseY,
+        )
+    }
 
-  updateMousePosition() {
-    const mousePos = this.stage.getStage().getPointerPosition();
-    this.setState({ mouseX: mousePos.x, mouseY: mousePos.y });
-  }
+    updateMousePosition() {
+        const mousePos = this.stage.getStage().getPointerPosition()
+        this.setState({ mouseX: mousePos.x, mouseY: mousePos.y })
+    }
 
-  handleShortcuts(action) {
-    switch (action) {
-      case "MOVE_LEFT":
-        this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0);
-        break;
-      case "MOVE_RIGHT":
-        this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0);
-        break;
-      case "MOVE_UP":
-        this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT);
-        break;
-      case "MOVE_DOWN":
-        this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT);
-        break;
-      default:
-        break;
+    handleShortcuts(action) {
+        switch (action) {
+            case 'MOVE_LEFT':
+                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0)
+                break
+            case 'MOVE_RIGHT':
+                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0)
+                break
+            case 'MOVE_UP':
+                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT)
+                break
+            case 'MOVE_DOWN':
+                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT)
+                break
+            default:
+                break
+        }
     }
-  }
 
-  moveWithDelta(deltaX, deltaY) {
-    this.props.setMapPositionWithBoundsCheck(
-      this.props.mapPosition.x + deltaX,
-      this.props.mapPosition.y + deltaY
-    );
-  }
+    moveWithDelta(deltaX, 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"
-      >
-        <Stage
-          ref={stage => {
-            this.stage = stage;
-          }}
-          width={this.props.mapDimensions.width}
-          height={this.props.mapDimensions.height}
-          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}
-            />
-          </Provider>
-        </Stage>
-      </Shortcuts>
-    );
-  }
+    render() {
+        return (
+            <Shortcuts
+                name="MAP"
+                handler={this.handleShortcuts.bind(this)}
+                targetNodeSelector="body"
+            >
+                <Stage
+                    ref={stage => {
+                        this.stage = stage
+                    }}
+                    width={this.props.mapDimensions.width}
+                    height={this.props.mapDimensions.height}
+                    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}
+                        />
+                    </Provider>
+                </Stage>
+            </Shortcuts>
+        )
+    }
 }
 
-export default MapStageComponent;
+export default MapStageComponent
diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
index ee934f21..d166bcc8 100644
--- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react'
 
 const ExportCanvasComponent = () => (
-  <button
-    className="btn btn-success btn-circle btn-sm"
-    title="Export Canvas to PNG Image"
-    onClick={() => window["exportCanvasToImage"]()}
-  >
-    <span className="fa fa-camera" />
-  </button>
-);
+    <button
+        className="btn btn-success btn-circle btn-sm"
+        title="Export Canvas to PNG Image"
+        onClick={() => window['exportCanvasToImage']()}
+    >
+        <span className="fa fa-camera"/>
+    </button>
+)
 
-export default ExportCanvasComponent;
+export default ExportCanvasComponent
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index b7b5cc36..daaf8ec6 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,14 +1,14 @@
-import React from "react";
-import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from "../MapConstants";
-import "./ScaleIndicatorComponent.css";
+import React from 'react'
+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 }}
-  >
-    {TILE_SIZE_IN_METERS}m
-  </div>
-);
+    <div
+        className="scale-indicator"
+        style={{ width: TILE_SIZE_IN_PIXELS * scale }}
+    >
+        {TILE_SIZE_IN_METERS}m
+    </div>
+)
 
-export default ScaleIndicatorComponent;
+export default ScaleIndicatorComponent
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass
index f2d2b55b..03a72c99 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass
@@ -1,9 +1,9 @@
 .scale-indicator
-  position: absolute
-  right: 10px
-  bottom: 10px
-  z-index: 50
+    position: absolute
+    right: 10px
+    bottom: 10px
+    z-index: 50
 
-  border: solid 2px #212529
-  border-top: none
-  border-left: none
+    border: solid 2px #212529
+    border-top: none
+    border-left: none
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index 605e9887..e3bb1dbb 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -1,13 +1,13 @@
-import React from "react";
-import ZoomControlContainer from "../../../../containers/app/map/controls/ZoomControlContainer";
-import ExportCanvasComponent from "./ExportCanvasComponent";
-import "./ToolPanelComponent.css";
+import React from 'react'
+import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
+import ExportCanvasComponent from './ExportCanvasComponent'
+import './ToolPanelComponent.css'
 
 const ToolPanelComponent = () => (
-  <div className="tool-panel">
-    <ZoomControlContainer />
-    <ExportCanvasComponent />
-  </div>
-);
+    <div className="tool-panel">
+        <ZoomControlContainer/>
+        <ExportCanvasComponent/>
+    </div>
+)
 
-export default ToolPanelComponent;
+export default ToolPanelComponent
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.sass b/frontend/src/components/app/map/controls/ToolPanelComponent.sass
index 996712b3..8b27d24a 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.sass
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.sass
@@ -1,5 +1,5 @@
 .tool-panel
-  position: absolute
-  left: 10px
-  bottom: 10px
-  z-index: 50
+    position: absolute
+    left: 10px
+    bottom: 10px
+    z-index: 50
diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js
index e1b7491e..bd6527a6 100644
--- a/frontend/src/components/app/map/controls/ZoomControlComponent.js
+++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js
@@ -1,24 +1,24 @@
-import React from "react";
+import React from 'react'
 
 const ZoomControlComponent = ({ zoomInOnCenter }) => {
-  return (
-    <span>
+    return (
+        <span>
       <button
-        className="btn btn-default btn-circle btn-sm mr-1"
-        title="Zoom in"
-        onClick={() => zoomInOnCenter(true)}
+          className="btn btn-default btn-circle btn-sm mr-1"
+          title="Zoom in"
+          onClick={() => zoomInOnCenter(true)}
       >
-        <span className="fa fa-plus" />
+        <span className="fa fa-plus"/>
       </button>
       <button
-        className="btn btn-default btn-circle btn-sm mr-1"
-        title="Zoom out"
-        onClick={() => zoomInOnCenter(false)}
+          className="btn btn-default btn-circle btn-sm mr-1"
+          title="Zoom out"
+          onClick={() => zoomInOnCenter(false)}
       >
-        <span className="fa fa-minus" />
+        <span className="fa fa-minus"/>
       </button>
     </span>
-  );
-};
+    )
+}
 
-export default ZoomControlComponent;
+export default ZoomControlComponent
diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js
index 57414463..556d6a7b 100644
--- a/frontend/src/components/app/map/elements/Backdrop.js
+++ b/frontend/src/components/app/map/elements/Backdrop.js
@@ -1,16 +1,16 @@
-import React from "react";
-import { Rect } from "react-konva";
-import { BACKDROP_COLOR } from "../../../../util/colors";
-import { MAP_SIZE_IN_PIXELS } from "../MapConstants";
+import React from 'react'
+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}
-  />
-);
+    <Rect
+        x={0}
+        y={0}
+        width={MAP_SIZE_IN_PIXELS}
+        height={MAP_SIZE_IN_PIXELS}
+        fill={BACKDROP_COLOR}
+    />
+)
 
-export default Backdrop;
+export default Backdrop
diff --git a/frontend/src/components/app/map/elements/GrayLayer.js b/frontend/src/components/app/map/elements/GrayLayer.js
index 28fadd8a..c54a34ad 100644
--- a/frontend/src/components/app/map/elements/GrayLayer.js
+++ b/frontend/src/components/app/map/elements/GrayLayer.js
@@ -1,17 +1,17 @@
-import React from "react";
-import { Rect } from "react-konva";
-import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors";
-import { MAP_SIZE_IN_PIXELS } from "../MapConstants";
+import React from 'react'
+import { Rect } from 'react-konva'
+import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
+import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
 
 const GrayLayer = ({ onClick }) => (
-  <Rect
-    x={0}
-    y={0}
-    width={MAP_SIZE_IN_PIXELS}
-    height={MAP_SIZE_IN_PIXELS}
-    fill={GRAYED_OUT_AREA_COLOR}
-    onClick={onClick}
-  />
-);
+    <Rect
+        x={0}
+        y={0}
+        width={MAP_SIZE_IN_PIXELS}
+        height={MAP_SIZE_IN_PIXELS}
+        fill={GRAYED_OUT_AREA_COLOR}
+        onClick={onClick}
+    />
+)
 
-export default GrayLayer;
+export default GrayLayer
diff --git a/frontend/src/components/app/map/elements/HoverTile.js b/frontend/src/components/app/map/elements/HoverTile.js
index 42e6547c..912229c4 100644
--- a/frontend/src/components/app/map/elements/HoverTile.js
+++ b/frontend/src/components/app/map/elements/HoverTile.js
@@ -1,30 +1,27 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Rect } from "react-konva";
-import {
-  ROOM_HOVER_INVALID_COLOR,
-  ROOM_HOVER_VALID_COLOR
-} from "../../../../util/colors";
-import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => (
-  <Rect
-    x={pixelX}
-    y={pixelY}
-    scaleX={scale}
-    scaleY={scale}
-    width={TILE_SIZE_IN_PIXELS}
-    height={TILE_SIZE_IN_PIXELS}
-    fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-    onClick={onClick}
-  />
-);
+    <Rect
+        x={pixelX}
+        y={pixelY}
+        scaleX={scale}
+        scaleY={scale}
+        width={TILE_SIZE_IN_PIXELS}
+        height={TILE_SIZE_IN_PIXELS}
+        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+        onClick={onClick}
+    />
+)
 
 HoverTile.propTypes = {
-  pixelX: PropTypes.number.isRequired,
-  pixelY: PropTypes.number.isRequired,
-  isValid: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
-};
+    pixelX: PropTypes.number.isRequired,
+    pixelY: PropTypes.number.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+}
 
-export default HoverTile;
+export default HoverTile
diff --git a/frontend/src/components/app/map/elements/ImageComponent.js b/frontend/src/components/app/map/elements/ImageComponent.js
index cf41ddfe..2b5c569f 100644
--- a/frontend/src/components/app/map/elements/ImageComponent.js
+++ b/frontend/src/components/app/map/elements/ImageComponent.js
@@ -1,48 +1,48 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Image } from "react-konva";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Image } from 'react-konva'
 
 class ImageComponent extends React.Component {
-  static imageCaches = {};
-  static propTypes = {
-    src: PropTypes.string.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    opacity: PropTypes.number.isRequired
-  };
-
-  state = {
-    image: null
-  };
+    static imageCaches = {}
+    static propTypes = {
+        src: PropTypes.string.isRequired,
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        opacity: PropTypes.number.isRequired,
+    }
 
-  componentDidMount() {
-    if (ImageComponent.imageCaches[this.props.src]) {
-      this.setState({ image: ImageComponent.imageCaches[this.props.src] });
-      return;
+    state = {
+        image: null,
     }
 
-    const image = new window.Image();
-    image.src = this.props.src;
-    image.onload = () => {
-      this.setState({ image });
-      ImageComponent.imageCaches[this.props.src] = image;
-    };
-  }
+    componentDidMount() {
+        if (ImageComponent.imageCaches[this.props.src]) {
+            this.setState({ image: ImageComponent.imageCaches[this.props.src] })
+            return
+        }
 
-  render() {
-    return (
-      <Image
-        image={this.state.image}
-        x={this.props.x}
-        y={this.props.y}
-        width={this.props.width}
-        height={this.props.height}
-        opacity={this.props.opacity}
-      />
-    );
-  }
+        const image = new window.Image()
+        image.src = this.props.src
+        image.onload = () => {
+            this.setState({ image })
+            ImageComponent.imageCaches[this.props.src] = image
+        }
+    }
+
+    render() {
+        return (
+            <Image
+                image={this.state.image}
+                x={this.props.x}
+                y={this.props.y}
+                width={this.props.width}
+                height={this.props.height}
+                opacity={this.props.opacity}
+            />
+        )
+    }
 }
 
-export default ImageComponent;
+export default ImageComponent
diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js
index 43701d97..6e56e059 100644
--- a/frontend/src/components/app/map/elements/RackFillBar.js
+++ b/frontend/src/components/app/map/elements/RackFillBar.js
@@ -1,89 +1,89 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Group, Rect } from "react-konva";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Rect } from 'react-konva'
 import {
-  RACK_ENERGY_BAR_BACKGROUND_COLOR,
-  RACK_ENERGY_BAR_FILL_COLOR,
-  RACK_SPACE_BAR_BACKGROUND_COLOR,
-  RACK_SPACE_BAR_FILL_COLOR
-} from "../../../../util/colors";
+    RACK_ENERGY_BAR_BACKGROUND_COLOR,
+    RACK_ENERGY_BAR_FILL_COLOR,
+    RACK_SPACE_BAR_BACKGROUND_COLOR,
+    RACK_SPACE_BAR_FILL_COLOR,
+} from '../../../../util/colors'
 import {
-  OBJECT_BORDER_WIDTH_IN_PIXELS,
-  OBJECT_MARGIN_IN_PIXELS,
-  RACK_FILL_ICON_OPACITY,
-  RACK_FILL_ICON_WIDTH,
-  TILE_SIZE_IN_PIXELS
-} from "../MapConstants";
-import ImageComponent from "./ImageComponent";
+    OBJECT_BORDER_WIDTH_IN_PIXELS,
+    OBJECT_MARGIN_IN_PIXELS,
+    RACK_FILL_ICON_OPACITY,
+    RACK_FILL_ICON_WIDTH,
+    TILE_SIZE_IN_PIXELS,
+} from '../MapConstants'
+import ImageComponent from './ImageComponent'
 
 const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
-  const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
-  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;
+    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
+    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
 
-  const fractionHeight = fillFraction * fullHeight;
-  const fractionY =
-    (positionY + 1) * TILE_SIZE_IN_PIXELS -
-    OBJECT_MARGIN_IN_PIXELS -
-    halfOfObjectBorderWidth -
-    fractionHeight;
+    const fractionHeight = fillFraction * fullHeight
+    const fractionY =
+        (positionY + 1) * TILE_SIZE_IN_PIXELS -
+        OBJECT_MARGIN_IN_PIXELS -
+        halfOfObjectBorderWidth -
+        fractionHeight
 
-  return (
-    <Group>
-      <Rect
-        x={x}
-        y={startY}
-        width={width}
-        height={fullHeight}
-        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
-        }
-      />
-      <ImageComponent
-        src={"/img/topology/rack-" + type + "-icon.png"}
-        x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-        y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-        width={RACK_FILL_ICON_WIDTH}
-        height={RACK_FILL_ICON_WIDTH}
-        opacity={RACK_FILL_ICON_OPACITY}
-      />
-    </Group>
-  );
-};
+    return (
+        <Group>
+            <Rect
+                x={x}
+                y={startY}
+                width={width}
+                height={fullHeight}
+                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
+                }
+            />
+            <ImageComponent
+                src={'/img/topology/rack-' + type + '-icon.png'}
+                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+                width={RACK_FILL_ICON_WIDTH}
+                height={RACK_FILL_ICON_WIDTH}
+                opacity={RACK_FILL_ICON_OPACITY}
+            />
+        </Group>
+    )
+}
 
 RackFillBar.propTypes = {
-  positionX: PropTypes.number.isRequired,
-  positionY: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-  fillFraction: PropTypes.number.isRequired
-};
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    type: PropTypes.string.isRequired,
+    fillFraction: PropTypes.number.isRequired,
+}
 
-export default RackFillBar;
+export default RackFillBar
diff --git a/frontend/src/components/app/map/elements/RoomTile.js b/frontend/src/components/app/map/elements/RoomTile.js
index 71c3bf15..43bf918e 100644
--- a/frontend/src/components/app/map/elements/RoomTile.js
+++ b/frontend/src/components/app/map/elements/RoomTile.js
@@ -1,20 +1,20 @@
-import React from "react";
-import { Rect } from "react-konva";
-import Shapes from "../../../../shapes/index";
-import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
+import React from 'react'
+import { Rect } from 'react-konva'
+import Shapes from '../../../../shapes/index'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const RoomTile = ({ tile, color }) => (
-  <Rect
-    x={tile.positionX * TILE_SIZE_IN_PIXELS}
-    y={tile.positionY * TILE_SIZE_IN_PIXELS}
-    width={TILE_SIZE_IN_PIXELS}
-    height={TILE_SIZE_IN_PIXELS}
-    fill={color}
-  />
-);
+    <Rect
+        x={tile.positionX * TILE_SIZE_IN_PIXELS}
+        y={tile.positionY * TILE_SIZE_IN_PIXELS}
+        width={TILE_SIZE_IN_PIXELS}
+        height={TILE_SIZE_IN_PIXELS}
+        fill={color}
+    />
+)
 
 RoomTile.propTypes = {
-  tile: Shapes.Tile
-};
+    tile: Shapes.Tile,
+}
 
-export default RoomTile;
+export default RoomTile
diff --git a/frontend/src/components/app/map/elements/TileObject.js b/frontend/src/components/app/map/elements/TileObject.js
index c1b631db..9e87cc82 100644
--- a/frontend/src/components/app/map/elements/TileObject.js
+++ b/frontend/src/components/app/map/elements/TileObject.js
@@ -1,29 +1,25 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Rect } from "react-konva";
-import { OBJECT_BORDER_COLOR } from "../../../../util/colors";
-import {
-  OBJECT_BORDER_WIDTH_IN_PIXELS,
-  OBJECT_MARGIN_IN_PIXELS,
-  TILE_SIZE_IN_PIXELS
-} from "../MapConstants";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Rect } from 'react-konva'
+import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
+import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const TileObject = ({ positionX, positionY, color }) => (
-  <Rect
-    x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-    y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-    width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-    height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-    fill={color}
-    stroke={OBJECT_BORDER_COLOR}
-    strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
-  />
-);
+    <Rect
+        x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+        y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+        width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+        height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+        fill={color}
+        stroke={OBJECT_BORDER_COLOR}
+        strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
+    />
+)
 
 TileObject.propTypes = {
-  positionX: PropTypes.number.isRequired,
-  positionY: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired
-};
+    positionX: PropTypes.number.isRequired,
+    positionY: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+}
 
-export default TileObject;
+export default TileObject
diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js
index 06377152..dd6e0beb 100644
--- a/frontend/src/components/app/map/elements/TilePlusIcon.js
+++ b/frontend/src/components/app/map/elements/TilePlusIcon.js
@@ -1,52 +1,48 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Group, Line } from "react-konva";
-import { TILE_PLUS_COLOR } from "../../../../util/colors";
-import {
-  TILE_PLUS_MARGIN_IN_PIXELS,
-  TILE_PLUS_WIDTH_IN_PIXELS,
-  TILE_SIZE_IN_PIXELS
-} from "../MapConstants";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group, Line } from 'react-konva'
+import { TILE_PLUS_COLOR } from '../../../../util/colors'
+import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
-  const linePoints = [
-    [
-      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
-    ],
-    [
-      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,
-      pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale
+    const linePoints = [
+        [
+            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,
+        ],
+        [
+            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,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+        ],
     ]
-  ];
-  return (
-    <Group>
-      {linePoints.map((points, index) => (
-        <Line
-          key={index}
-          points={points}
-          lineCap="round"
-          stroke={TILE_PLUS_COLOR}
-          strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
-          listening={false}
-        />
-      ))}
-    </Group>
-  );
-};
+    return (
+        <Group>
+            {linePoints.map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+}
 
 TilePlusIcon.propTypes = {
-  pixelX: PropTypes.number,
-  pixelY: PropTypes.number,
-  mapScale: PropTypes.number
-};
+    pixelX: PropTypes.number,
+    pixelY: PropTypes.number,
+    mapScale: PropTypes.number,
+}
 
-export default TilePlusIcon;
+export default TilePlusIcon
diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js
index c5011656..d1ba6157 100644
--- a/frontend/src/components/app/map/elements/WallSegment.js
+++ b/frontend/src/components/app/map/elements/WallSegment.js
@@ -1,39 +1,39 @@
-import React from "react";
-import { Line } from "react-konva";
-import Shapes from "../../../../shapes/index";
-import { WALL_COLOR } from "../../../../util/colors";
-import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from "../MapConstants";
+import React from 'react'
+import { Line } from 'react-konva'
+import Shapes from '../../../../shapes/index'
+import { WALL_COLOR } from '../../../../util/colors'
+import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
 
 const WallSegment = ({ wallSegment }) => {
-  let points;
-  if (wallSegment.isHorizontal) {
-    points = [
-      wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-      wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-      (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-      wallSegment.startPosY * TILE_SIZE_IN_PIXELS
-    ];
-  } else {
-    points = [
-      wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-      wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-      wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-      (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS
-    ];
-  }
+    let points
+    if (wallSegment.isHorizontal) {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+        ]
+    } else {
+        points = [
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+        ]
+    }
 
-  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 = {
-  wallSegment: Shapes.WallSegment
-};
+    wallSegment: Shapes.WallSegment,
+}
 
-export default WallSegment;
+export default WallSegment
diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js
index 51e32db6..3d3b9702 100644
--- a/frontend/src/components/app/map/groups/DatacenterGroup.js
+++ b/frontend/src/components/app/map/groups/DatacenterGroup.js
@@ -1,40 +1,40 @@
-import React from "react";
-import { Group } from "react-konva";
-import GrayContainer from "../../../../containers/app/map/GrayContainer";
-import RoomContainer from "../../../../containers/app/map/RoomContainer";
-import Shapes from "../../../../shapes/index";
+import React from 'react'
+import { Group } from 'react-konva'
+import GrayContainer from '../../../../containers/app/map/GrayContainer'
+import RoomContainer from '../../../../containers/app/map/RoomContainer'
+import Shapes from '../../../../shapes/index'
 
 const DatacenterGroup = ({ datacenter, interactionLevel }) => {
-  if (!datacenter) {
-    return <Group />;
-  }
+    if (!datacenter) {
+        return <Group/>
+    }
 
-  if (interactionLevel.mode === "BUILDING") {
-    return (
-      <Group>
-        {datacenter.roomIds.map(roomId => (
-          <RoomContainer key={roomId} roomId={roomId} />
-        ))}
-      </Group>
-    );
-  }
+    if (interactionLevel.mode === 'BUILDING') {
+        return (
+            <Group>
+                {datacenter.roomIds.map(roomId => (
+                    <RoomContainer key={roomId} roomId={roomId}/>
+                ))}
+            </Group>
+        )
+    }
 
-  return (
-    <Group>
-      {datacenter.roomIds
-        .filter(roomId => roomId !== interactionLevel.roomId)
-        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
-      {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null}
-      {datacenter.roomIds
-        .filter(roomId => roomId === interactionLevel.roomId)
-        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
-    </Group>
-  );
-};
+    return (
+        <Group>
+            {datacenter.roomIds
+                .filter(roomId => roomId !== interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
+            {datacenter.roomIds
+                .filter(roomId => roomId === interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+        </Group>
+    )
+}
 
 DatacenterGroup.propTypes = {
-  datacenter: Shapes.Datacenter,
-  interactionLevel: Shapes.InteractionLevel
-};
+    datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
+}
 
-export default DatacenterGroup;
+export default DatacenterGroup
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
index bbb1eb68..10554834 100644
--- a/frontend/src/components/app/map/groups/GridGroup.js
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -1,41 +1,36 @@
-import React from "react";
-import { Group, Line } from "react-konva";
-import { GRID_COLOR } from "../../../../util/colors";
-import {
-  GRID_LINE_WIDTH_IN_PIXELS,
-  MAP_SIZE,
-  MAP_SIZE_IN_PIXELS,
-  TILE_SIZE_IN_PIXELS
-} from "../MapConstants";
+import React from 'react'
+import { Group, Line } from 'react-konva'
+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 MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
 const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
-  0,
-  index * TILE_SIZE_IN_PIXELS,
-  MAP_SIZE_IN_PIXELS,
-  index * TILE_SIZE_IN_PIXELS
-]);
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+    index * TILE_SIZE_IN_PIXELS,
+])
 const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
-  index * TILE_SIZE_IN_PIXELS,
-  0,
-  index * TILE_SIZE_IN_PIXELS,
-  MAP_SIZE_IN_PIXELS
-]);
+    index * TILE_SIZE_IN_PIXELS,
+    0,
+    index * TILE_SIZE_IN_PIXELS,
+    MAP_SIZE_IN_PIXELS,
+])
 
 const GridGroup = () => (
-  <Group>
-    {HORIZONTAL_POINT_PAIRS.concat(
-      VERTICAL_POINT_PAIRS
-    ).map((points, index) => (
-      <Line
-        key={index}
-        points={points}
-        stroke={GRID_COLOR}
-        strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
-        listening={false}
-      />
-    ))}
-  </Group>
-);
+    <Group>
+        {HORIZONTAL_POINT_PAIRS.concat(
+            VERTICAL_POINT_PAIRS,
+        ).map((points, index) => (
+            <Line
+                key={index}
+                points={points}
+                stroke={GRID_COLOR}
+                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                listening={false}
+            />
+        ))}
+    </Group>
+)
 
-export default GridGroup;
+export default GridGroup
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 69d6ac10..708dcf69 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -1,43 +1,43 @@
-import React from "react";
-import { Group } from "react-konva";
-import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer";
-import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer";
-import Shapes from "../../../../shapes/index";
-import { RACK_BACKGROUND_COLOR } from "../../../../util/colors";
-import { convertLoadToSimulationColor } from "../../../../util/simulation-load";
-import TileObject from "../elements/TileObject";
+import React from 'react'
+import { Group } from 'react-konva'
+import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer'
+import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer'
+import Shapes from '../../../../shapes/index'
+import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
+import { convertLoadToSimulationColor } from '../../../../util/simulation-load'
+import TileObject from '../elements/TileObject'
 
 const RackGroup = ({ tile, inSimulation, rackLoad }) => {
-  let color = RACK_BACKGROUND_COLOR;
-  if (inSimulation && rackLoad >= 0) {
-    color = convertLoadToSimulationColor(rackLoad);
-  }
+    let color = RACK_BACKGROUND_COLOR
+    if (inSimulation && rackLoad >= 0) {
+        color = convertLoadToSimulationColor(rackLoad)
+    }
 
-  return (
-    <Group>
-      <TileObject
-        positionX={tile.positionX}
-        positionY={tile.positionY}
-        color={color}
-      />
-      <Group opacity={inSimulation ? 0.3 : 1}>
-        <RackSpaceFillContainer
-          tileId={tile.id}
-          positionX={tile.positionX}
-          positionY={tile.positionY}
-        />
-        <RackEnergyFillContainer
-          tileId={tile.id}
-          positionX={tile.positionX}
-          positionY={tile.positionY}
-        />
-      </Group>
-    </Group>
-  );
-};
+    return (
+        <Group>
+            <TileObject
+                positionX={tile.positionX}
+                positionY={tile.positionY}
+                color={color}
+            />
+            <Group opacity={inSimulation ? 0.3 : 1}>
+                <RackSpaceFillContainer
+                    tileId={tile.id}
+                    positionX={tile.positionX}
+                    positionY={tile.positionY}
+                />
+                <RackEnergyFillContainer
+                    tileId={tile.id}
+                    positionX={tile.positionX}
+                    positionY={tile.positionY}
+                />
+            </Group>
+        </Group>
+    )
+}
 
 RackGroup.propTypes = {
-  tile: Shapes.Tile
-};
+    tile: Shapes.Tile,
+}
 
-export default RackGroup;
+export default RackGroup
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
index c8f0d3db..230e3c9b 100644
--- a/frontend/src/components/app/map/groups/RoomGroup.js
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -1,56 +1,56 @@
-import React from "react";
-import { Group } from "react-konva";
-import GrayContainer from "../../../../containers/app/map/GrayContainer";
-import TileContainer from "../../../../containers/app/map/TileContainer";
-import WallContainer from "../../../../containers/app/map/WallContainer";
-import Shapes from "../../../../shapes/index";
+import React from 'react'
+import { Group } from 'react-konva'
+import GrayContainer from '../../../../containers/app/map/GrayContainer'
+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
-}) => {
-  if (currentRoomInConstruction === room.id) {
-    return (
-      <Group onClick={onClick}>
-        {room.tileIds.map(tileId => (
-          <TileContainer key={tileId} tileId={tileId} newTile={true} />
-        ))}
-      </Group>
-    );
-  }
+                       room,
+                       interactionLevel,
+                       currentRoomInConstruction,
+                       onClick,
+                   }) => {
+    if (currentRoomInConstruction === room.id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tileIds.map(tileId => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                ))}
+            </Group>
+        )
+    }
 
-  return (
-    <Group onClick={onClick}>
-      {(() => {
-        if (
-          (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} />,
-            room.tileIds
-              .filter(tileId => tileId === interactionLevel.tileId)
-              .map(tileId => <TileContainer key={tileId} tileId={tileId} />)
-          ];
-        } else {
-          return room.tileIds.map(tileId => (
-            <TileContainer key={tileId} tileId={tileId} />
-          ));
-        }
-      })()}
-      <WallContainer roomId={room.id} />
-    </Group>
-  );
-};
+    return (
+        <Group onClick={onClick}>
+            {(() => {
+                if (
+                    (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}/>,
+                        room.tileIds
+                            .filter(tileId => tileId === interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                    ]
+                } else {
+                    return room.tileIds.map(tileId => (
+                        <TileContainer key={tileId} tileId={tileId}/>
+                    ))
+                }
+            })()}
+            <WallContainer roomId={room.id}/>
+        </Group>
+    )
+}
 
 RoomGroup.propTypes = {
-  room: Shapes.Room
-};
+    room: Shapes.Room,
+}
 
-export default RoomGroup;
+export default RoomGroup
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index 8f3953d7..49e2e52b 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -1,43 +1,40 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Group } from "react-konva";
-import RackContainer from "../../../../containers/app/map/RackContainer";
-import Shapes from "../../../../shapes/index";
-import {
-  ROOM_DEFAULT_COLOR,
-  ROOM_IN_CONSTRUCTION_COLOR
-} from "../../../../util/colors";
-import { convertLoadToSimulationColor } from "../../../../util/simulation-load";
-import RoomTile from "../elements/RoomTile";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import RackContainer from '../../../../containers/app/map/RackContainer'
+import Shapes from '../../../../shapes/index'
+import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
+import { convertLoadToSimulationColor } from '../../../../util/simulation-load'
+import RoomTile from '../elements/RoomTile'
 
 const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => {
-  let tileObject;
-  switch (tile.objectType) {
-    case "RACK":
-      tileObject = <RackContainer tile={tile} />;
-      break;
-    default:
-      tileObject = null;
-  }
+    let tileObject
+    switch (tile.objectType) {
+        case 'RACK':
+            tileObject = <RackContainer tile={tile}/>
+            break
+        default:
+            tileObject = null
+    }
 
-  let color = ROOM_DEFAULT_COLOR;
-  if (newTile) {
-    color = ROOM_IN_CONSTRUCTION_COLOR;
-  } else if (inSimulation && roomLoad >= 0) {
-    color = convertLoadToSimulationColor(roomLoad);
-  }
+    let color = ROOM_DEFAULT_COLOR
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR
+    } else if (inSimulation && roomLoad >= 0) {
+        color = convertLoadToSimulationColor(roomLoad)
+    }
 
-  return (
-    <Group onClick={() => onClick(tile)}>
-      <RoomTile tile={tile} color={color} />
-      {tileObject}
-    </Group>
-  );
-};
+    return (
+        <Group onClick={() => onClick(tile)}>
+            <RoomTile tile={tile} color={color}/>
+            {tileObject}
+        </Group>
+    )
+}
 
 TileGroup.propTypes = {
-  tile: Shapes.Tile,
-  newTile: PropTypes.bool
-};
+    tile: Shapes.Tile,
+    newTile: PropTypes.bool,
+}
 
-export default TileGroup;
+export default TileGroup
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
index 43de66e8..81c72d94 100644
--- a/frontend/src/components/app/map/groups/WallGroup.js
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -1,22 +1,22 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Group } from "react-konva";
-import Shapes from "../../../../shapes/index";
-import { deriveWallLocations } from "../../../../util/tile-calculations";
-import WallSegment from "../elements/WallSegment";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Group } from 'react-konva'
+import Shapes from '../../../../shapes/index'
+import { deriveWallLocations } from '../../../../util/tile-calculations'
+import WallSegment from '../elements/WallSegment'
 
 const WallGroup = ({ tiles }) => {
-  return (
-    <Group>
-      {deriveWallLocations(tiles).map((wallSegment, index) => (
-        <WallSegment key={index} wallSegment={wallSegment} />
-      ))}
-    </Group>
-  );
-};
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment}/>
+            ))}
+        </Group>
+    )
+}
 
 WallGroup.propTypes = {
-  tiles: PropTypes.arrayOf(Shapes.Tile).isRequired
-};
+    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+}
 
-export default WallGroup;
+export default WallGroup
diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
index c39532f1..25c9c412 100644
--- a/frontend/src/components/app/map/layers/HoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -1,85 +1,85 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Layer } from "react-konva";
-import HoverTile from "../elements/HoverTile";
-import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Layer } from 'react-konva'
+import HoverTile from '../elements/HoverTile'
+import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 class HoverLayerComponent extends React.Component {
-  static propTypes = {
-    mouseX: PropTypes.number.isRequired,
-    mouseY: PropTypes.number.isRequired,
-    mapPosition: PropTypes.object.isRequired,
-    mapScale: PropTypes.number.isRequired,
-    isEnabled: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired
-  };
-
-  state = {
-    positionX: -1,
-    positionY: -1,
-    validity: false
-  };
+    static propTypes = {
+        mouseX: PropTypes.number.isRequired,
+        mouseY: PropTypes.number.isRequired,
+        mapPosition: PropTypes.object.isRequired,
+        mapScale: PropTypes.number.isRequired,
+        isEnabled: PropTypes.func.isRequired,
+        onClick: PropTypes.func.isRequired,
+    }
 
-  componentDidUpdate() {
-    if (!this.props.isEnabled()) {
-      return;
+    state = {
+        positionX: -1,
+        positionY: -1,
+        validity: false,
     }
 
-    const positionX = Math.floor(
-      (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)
-    );
+    componentDidUpdate() {
+        if (!this.props.isEnabled()) {
+            return
+        }
 
-    if (
-      positionX !== this.state.positionX ||
-      positionY !== this.state.positionY
-    ) {
-      this.setState({
-        positionX,
-        positionY,
-        validity: this.props.isValid(positionX, positionY)
-      });
-    }
-  }
+        const positionX = Math.floor(
+            (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),
+        )
 
-  render() {
-    if (!this.props.isEnabled()) {
-      return <Layer />;
+        if (
+            positionX !== this.state.positionX ||
+            positionY !== this.state.positionY
+        ) {
+            this.setState({
+                positionX,
+                positionY,
+                validity: this.props.isValid(positionX, positionY),
+            })
+        }
     }
 
-    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;
+    render() {
+        if (!this.props.isEnabled()) {
+            return <Layer/>
+        }
 
-    return (
-      <Layer opacity={0.6}>
-        <HoverTile
-          pixelX={pixelX}
-          pixelY={pixelY}
-          scale={this.props.mapScale}
-          isValid={this.state.validity}
-          onClick={() =>
-            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
-            })
-          : undefined}
-      </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
+
+        return (
+            <Layer opacity={0.6}>
+                <HoverTile
+                    pixelX={pixelX}
+                    pixelY={pixelY}
+                    scale={this.props.mapScale}
+                    isValid={this.state.validity}
+                    onClick={() =>
+                        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,
+                    })
+                    : undefined}
+            </Layer>
+        )
+    }
 }
 
-export default HoverLayerComponent;
+export default HoverLayerComponent
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
index 6ad3cb88..1a31f2b9 100644
--- a/frontend/src/components/app/map/layers/MapLayerComponent.js
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -1,22 +1,22 @@
-import React from "react";
-import { Group, Layer } from "react-konva";
-import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer";
-import Backdrop from "../elements/Backdrop";
-import GridGroup from "../groups/GridGroup";
+import React from 'react'
+import { Group, Layer } from 'react-konva'
+import DatacenterContainer from '../../../../containers/app/map/DatacenterContainer'
+import Backdrop from '../elements/Backdrop'
+import GridGroup from '../groups/GridGroup'
 
 const MapLayerComponent = ({ mapPosition, mapScale }) => (
-  <Layer>
-    <Group
-      x={mapPosition.x}
-      y={mapPosition.y}
-      scaleX={mapScale}
-      scaleY={mapScale}
-    >
-      <Backdrop />
-      <DatacenterContainer />
-      <GridGroup />
-    </Group>
-  </Layer>
-);
+    <Layer>
+        <Group
+            x={mapPosition.x}
+            y={mapPosition.y}
+            scaleX={mapScale}
+            scaleY={mapScale}
+        >
+            <Backdrop/>
+            <DatacenterContainer/>
+            <GridGroup/>
+        </Group>
+    </Layer>
+)
 
-export default MapLayerComponent;
+export default MapLayerComponent
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
index e7342d3c..31689635 100644
--- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -1,11 +1,11 @@
-import React from "react";
-import TilePlusIcon from "../elements/TilePlusIcon";
-import HoverLayerComponent from "./HoverLayerComponent";
+import React from 'react'
+import TilePlusIcon from '../elements/TilePlusIcon'
+import HoverLayerComponent from './HoverLayerComponent'
 
 const ObjectHoverLayerComponent = props => (
-  <HoverLayerComponent {...props}>
-    <TilePlusIcon {...props} />
-  </HoverLayerComponent>
-);
+    <HoverLayerComponent {...props}>
+        <TilePlusIcon {...props} />
+    </HoverLayerComponent>
+)
 
-export default ObjectHoverLayerComponent;
+export default ObjectHoverLayerComponent
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
index feea5ae5..d3d5e9b2 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";
+import React from 'react'
+import HoverLayerComponent from './HoverLayerComponent'
 
-const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />;
+const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />
 
-export default RoomHoverLayerComponent;
+export default RoomHoverLayerComponent
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index 33dbe011..7ba8639a 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -1,50 +1,50 @@
-import classNames from "classnames";
-import React from "react";
-import "./Sidebar.css";
+import classNames from 'classnames'
+import React from 'react'
+import './Sidebar.css'
 
 class Sidebar extends React.Component {
-  state = {
-    collapsed: false
-  };
+    state = {
+        collapsed: false,
+    }
 
-  render() {
-    const collapseButton = (
-      <div
-        className={classNames("sidebar-collapse-button", {
-          "sidebar-collapse-button-right": this.props.isRight
-        })}
-        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"}
-          />
-        ) : (
-          <span
-            className="fa fa-angle-right"
-            title={this.props.isRight ? "Collapse" : "Expand"}
-          />
-        )}
-      </div>
-    );
+    render() {
+        const collapseButton = (
+            <div
+                className={classNames('sidebar-collapse-button', {
+                    'sidebar-collapse-button-right': this.props.isRight,
+                })}
+                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'}
+                    />
+                ) : (
+                    <span
+                        className="fa fa-angle-right"
+                        title={this.props.isRight ? 'Collapse' : 'Expand'}
+                    />
+                )}
+            </div>
+        )
 
-    if (this.state.collapsed) {
-      return collapseButton;
+        if (this.state.collapsed) {
+            return collapseButton
+        }
+        return (
+            <div
+                className={classNames('sidebar p-3 h-100', {
+                    'sidebar-right': this.props.isRight,
+                })}
+                onWheel={e => e.stopPropagation()}
+            >
+                {this.props.children}
+                {collapseButton}
+            </div>
+        )
     }
-    return (
-      <div
-        className={classNames("sidebar p-3 h-100", {
-          "sidebar-right": this.props.isRight
-        })}
-        onWheel={e => e.stopPropagation()}
-      >
-        {this.props.children}
-        {collapseButton}
-      </div>
-    );
-  }
 }
 
-export default Sidebar;
+export default Sidebar
diff --git a/frontend/src/components/app/sidebars/Sidebar.sass b/frontend/src/components/app/sidebars/Sidebar.sass
index 4d0e5f1e..02e8940d 100644
--- a/frontend/src/components/app/sidebars/Sidebar.sass
+++ b/frontend/src/components/app/sidebars/Sidebar.sass
@@ -2,49 +2,49 @@
 @import ../../../style-globals/_mixins.sass
 
 .sidebar-collapse-button
-  position: absolute
-  left: 5px
-  top: 5px
-  padding: 5px 7px
+    position: absolute
+    left: 5px
+    top: 5px
+    padding: 5px 7px
 
-  background: white
-  border: solid 1px $gray-semi-light
-  z-index: 99
+    background: white
+    border: solid 1px $gray-semi-light
+    z-index: 99
 
-  +clickable
-  +border-radius(5px)
-  +transition(background, 200ms)
+    +clickable
+    +border-radius(5px)
+    +transition(background, 200ms)
 
-  &.sidebar-collapse-button-right
-    left: auto
-    right: 5px
-    top: 5px
+    &.sidebar-collapse-button-right
+        left: auto
+        right: 5px
+        top: 5px
 
-  &:hover
-    background: #eeeeee
+    &:hover
+        background: #eeeeee
 
 .sidebar
-  position: absolute
-  top: 0
-  left: 0
-  width: 350px
+    position: absolute
+    top: 0
+    left: 0
+    width: 350px
 
-  z-index: 100
-  background: white
+    z-index: 100
+    background: white
 
-  border-right: $gray-semi-dark 1px solid
+    border-right: $gray-semi-dark 1px solid
 
-  .sidebar-collapse-button
-    left: auto
-    right: -25px
+    .sidebar-collapse-button
+        left: auto
+        right: -25px
 
 .sidebar-right
-  left: auto
-  right: 0
+    left: auto
+    right: 0
 
-  border-left: $gray-semi-dark 1px solid
-  border-right: none
+    border-left: $gray-semi-dark 1px solid
+    border-right: none
 
-  .sidebar-collapse-button-right
-    left: -25px
-    right: auto
+    .sidebar-collapse-button-right
+        left: -25px
+        right: auto
diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
index 8c9b164b..01005085 100644
--- a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
@@ -1,22 +1,22 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 const LoadBarComponent = ({ percent, disabled }) => (
-  <div className="mt-1">
-    <strong>Current load</strong>
-    <div className={classNames("progress", { disabled })}>
-      <div
-        className="progress-bar"
-        role="progressbar"
-        aria-valuenow={percent}
-        aria-valuemin="0"
-        aria-valuemax="100"
-        style={{ width: percent + "%" }}
-      >
-        {percent}%
-      </div>
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames('progress', { disabled })}>
+            <div
+                className="progress-bar"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{ width: percent + '%' }}
+            >
+                {percent}%
+            </div>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadBarComponent;
+export default LoadBarComponent
diff --git a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
index 5f0d40cb..ae52891a 100644
--- a/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/frontend/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -1,90 +1,84 @@
-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";
+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"
-    );
-  };
+    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>
-  );
-};
+    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>
-);
+    <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>
-);
+    <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;
+export default LoadChartComponent
diff --git a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
index bc563dab..54a8b5e9 100644
--- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -1,23 +1,23 @@
-import React from "react";
+import React from 'react'
 
 const ExperimentMetadataComponent = ({
-  experimentName,
-  pathName,
-  traceName,
-  schedulerName
-}) => (
-  <div>
-    <h2>{experimentName}</h2>
-    <p>
-      Path: <strong>{pathName}</strong>
-    </p>
-    <p>
-      Trace: <strong>{traceName}</strong>
-    </p>
-    <p>
-      Scheduler: <strong>{schedulerName}</strong>
-    </p>
-  </div>
-);
+                                         experimentName,
+                                         pathName,
+                                         traceName,
+                                         schedulerName,
+                                     }) => (
+    <div>
+        <h2>{experimentName}</h2>
+        <p>
+            Path: <strong>{pathName}</strong>
+        </p>
+        <p>
+            Trace: <strong>{traceName}</strong>
+        </p>
+        <p>
+            Scheduler: <strong>{schedulerName}</strong>
+        </p>
+    </div>
+)
 
-export default ExperimentMetadataComponent;
+export default ExperimentMetadataComponent
diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
index 3e4cf810..6ee6a3b9 100644
--- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -1,40 +1,35 @@
-import React from "react";
-import {
-  SIM_HIGH_COLOR,
-  SIM_LOW_COLOR,
-  SIM_MID_HIGH_COLOR,
-  SIM_MID_LOW_COLOR
-} from "../../../../util/colors";
-import { LOAD_NAME_MAP } from "../../../../util/simulation-load";
+import React from 'react'
+import { SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR } from '../../../../util/colors'
+import { LOAD_NAME_MAP } from '../../../../util/simulation-load'
 
 const LoadMetricComponent = ({ loadMetric }) => (
-  <div>
     <div>
-      Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
-    </div>
-    <div className="btn-group mb-2" style={{ display: "flex" }}>
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
-        title="0-25%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
-        title="25-50%"
-      />
-      <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
-        title="50-75%"
-      />
+        <div>
+            Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong>
+        </div>
+        <div className="btn-group mb-2" style={{ display: 'flex' }}>
       <span
-        className="btn btn-secondary"
-        style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
-        title="75-100%"
+          className="btn btn-secondary"
+          style={{ backgroundColor: SIM_LOW_COLOR, flex: 1 }}
+          title="0-25%"
       />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_LOW_COLOR, flex: 1 }}
+                title="25-50%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_MID_HIGH_COLOR, flex: 1 }}
+                title="50-75%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{ backgroundColor: SIM_HIGH_COLOR, flex: 1 }}
+                title="75-100%"
+            />
+        </div>
     </div>
-  </div>
-);
+)
 
-export default LoadMetricComponent;
+export default LoadMetricComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
index 08dbb29a..6e89c40e 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -1,22 +1,22 @@
-import React from "react";
-import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer";
-import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer";
-import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer";
-import Sidebar from "../Sidebar";
-import "./SimulationSidebarComponent.css";
+import React from 'react'
+import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer'
+import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer'
+import TraceContainer from '../../../../containers/app/sidebars/simulation/TraceContainer'
+import Sidebar from '../Sidebar'
+import './SimulationSidebarComponent.css'
 
 const SimulationSidebarComponent = () => {
-  return (
-    <Sidebar isRight={false}>
-      <div className="simulation-sidebar-container flex-column">
-        <ExperimentMetadataContainer />
-        <LoadMetricContainer />
-        <div className="trace-container">
-          <TraceContainer />
-        </div>
-      </div>
-    </Sidebar>
-  );
-};
+    return (
+        <Sidebar isRight={false}>
+            <div className="simulation-sidebar-container flex-column">
+                <ExperimentMetadataContainer/>
+                <LoadMetricContainer/>
+                <div className="trace-container">
+                    <TraceContainer/>
+                </div>
+            </div>
+        </Sidebar>
+    )
+}
 
-export default SimulationSidebarComponent;
+export default SimulationSidebarComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
index 82af97fa..6490cf8d 100644
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
+++ b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
@@ -1,8 +1,8 @@
 .simulation-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
+    display: flex
+    height: 100%
+    max-height: 100%
 
 .trace-container
-  flex: 1
-  overflow-y: scroll
+    flex: 1
+    overflow-y: scroll
diff --git a/frontend/src/components/app/sidebars/simulation/TaskComponent.js b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
index bd917cc9..94617086 100644
--- a/frontend/src/components/app/sidebars/simulation/TaskComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TaskComponent.js
@@ -1,58 +1,58 @@
-import approx from "approximate-number";
-import classNames from "classnames";
-import React from "react";
-import { convertSecondsToFormattedTime } from "../../../../util/date-time";
+import approx from 'approximate-number'
+import classNames from 'classnames'
+import React from 'react'
+import { convertSecondsToFormattedTime } from '../../../../util/date-time'
 
 const TaskComponent = ({ task, flopsLeft }) => {
-  let icon;
-  let progressBarContent;
-  let percent;
-  let infoTitle;
+    let icon
+    let progressBarContent
+    let percent
+    let infoTitle
 
-  if (flopsLeft === task.totalFlopCount) {
-    icon = "hourglass-half";
-    progressBarContent = "";
-    percent = 0;
-    infoTitle = "Not submitted yet";
-  } else if (flopsLeft > 0) {
-    icon = "refresh";
-    progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
-    percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
-    infoTitle =
-      progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
-  } else {
-    icon = "check";
-    progressBarContent = "Completed";
-    percent = 100;
-    infoTitle = "Completed";
-  }
+    if (flopsLeft === task.totalFlopCount) {
+        icon = 'hourglass-half'
+        progressBarContent = ''
+        percent = 0
+        infoTitle = 'Not submitted yet'
+    } else if (flopsLeft > 0) {
+        icon = 'refresh'
+        progressBarContent = approx(task.totalFlopCount - flopsLeft) + ' FLOP'
+        percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount
+        infoTitle =
+            progressBarContent + ' (' + Math.round(percent * 10) / 10 + '%)'
+    } else {
+        icon = 'check'
+        progressBarContent = 'Completed'
+        percent = 100
+        infoTitle = 'Completed'
+    }
 
-  return (
-    <li className="list-group-item flex-column align-items-start">
-      <div className="d-flex w-100 justify-content-between">
-        <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
-        <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
-      </div>
-      <div title={infoTitle} style={{ display: "flex" }}>
+    return (
+        <li className="list-group-item flex-column align-items-start">
+            <div className="d-flex w-100 justify-content-between">
+                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
+                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
+            </div>
+            <div title={infoTitle} style={{ display: 'flex' }}>
         <span
-          className={classNames("fa", "fa-" + icon)}
-          style={{ width: "20px" }}
+            className={classNames('fa', 'fa-' + icon)}
+            style={{ width: '20px' }}
         />
-        <div className="progress" style={{ flexGrow: 1 }}>
-          <div
-            className="progress-bar"
-            role="progressbar"
-            aria-valuenow={percent}
-            aria-valuemin="0"
-            aria-valuemax="100"
-            style={{ width: percent + "%" }}
-          >
-            {progressBarContent}
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
+                <div className="progress" style={{ flexGrow: 1 }}>
+                    <div
+                        className="progress-bar"
+                        role="progressbar"
+                        aria-valuenow={percent}
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        style={{ width: percent + '%' }}
+                    >
+                        {progressBarContent}
+                    </div>
+                </div>
+            </div>
+        </li>
+    )
+}
 
-export default TaskComponent;
+export default TaskComponent
diff --git a/frontend/src/components/app/sidebars/simulation/TraceComponent.js b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
index 2b6559b4..1292219b 100644
--- a/frontend/src/components/app/sidebars/simulation/TraceComponent.js
+++ b/frontend/src/components/app/sidebars/simulation/TraceComponent.js
@@ -1,20 +1,20 @@
-import React from "react";
-import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer";
+import React from 'react'
+import TaskContainer from '../../../../containers/app/sidebars/simulation/TaskContainer'
 
 const TraceComponent = ({ jobs }) => (
-  <div>
-    <h3>Trace</h3>
-    {jobs.map(job => (
-      <div key={job.id}>
-        <h4>Job: {job.name}</h4>
-        <ul className="list-group">
-          {job.taskIds.map(taskId => (
-            <TaskContainer taskId={taskId} key={taskId} />
-          ))}
-        </ul>
-      </div>
-    ))}
-  </div>
-);
+    <div>
+        <h3>Trace</h3>
+        {jobs.map(job => (
+            <div key={job.id}>
+                <h4>Job: {job.name}</h4>
+                <ul className="list-group">
+                    {job.taskIds.map(taskId => (
+                        <TaskContainer taskId={taskId} key={taskId}/>
+                    ))}
+                </ul>
+            </div>
+        ))}
+    </div>
+)
 
-export default TraceComponent;
+export default TraceComponent
diff --git a/frontend/src/components/app/sidebars/topology/NameComponent.js b/frontend/src/components/app/sidebars/topology/NameComponent.js
index 805538b3..1f3051d5 100644
--- a/frontend/src/components/app/sidebars/topology/NameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/NameComponent.js
@@ -1,13 +1,13 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
 
 const NameComponent = ({ name, onEdit }) => (
-  <h2>
-    {name}
-    <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-      <FontAwesome name="pencil" />
-    </button>
-  </h2>
-);
+    <h2>
+        {name}
+        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
+            <FontAwesome name="pencil"/>
+        </button>
+    </h2>
+)
 
-export default NameComponent;
+export default NameComponent
diff --git a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
index 81e510a1..b1def94b 100644
--- a/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -1,31 +1,31 @@
-import React from "react";
-import BuildingSidebarContainer from "../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer";
-import MachineSidebarContainer from "../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer";
-import RackSidebarContainer from "../../../../containers/app/sidebars/topology/rack/RackSidebarContainer";
-import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer";
-import Sidebar from "../Sidebar";
+import React from 'react'
+import BuildingSidebarContainer from '../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer'
+import MachineSidebarContainer from '../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer'
+import RackSidebarContainer from '../../../../containers/app/sidebars/topology/rack/RackSidebarContainer'
+import RoomSidebarContainer from '../../../../containers/app/sidebars/topology/room/RoomSidebarContainer'
+import Sidebar from '../Sidebar'
 
 const TopologySidebarComponent = ({ interactionLevel }) => {
-  let sidebarContent;
+    let sidebarContent
 
-  switch (interactionLevel.mode) {
-    case "BUILDING":
-      sidebarContent = <BuildingSidebarContainer />;
-      break;
-    case "ROOM":
-      sidebarContent = <RoomSidebarContainer />;
-      break;
-    case "RACK":
-      sidebarContent = <RackSidebarContainer />;
-      break;
-    case "MACHINE":
-      sidebarContent = <MachineSidebarContainer />;
-      break;
-    default:
-      sidebarContent = "Missing Content";
-  }
+    switch (interactionLevel.mode) {
+        case 'BUILDING':
+            sidebarContent = <BuildingSidebarContainer/>
+            break
+        case 'ROOM':
+            sidebarContent = <RoomSidebarContainer/>
+            break
+        case 'RACK':
+            sidebarContent = <RackSidebarContainer/>
+            break
+        case 'MACHINE':
+            sidebarContent = <MachineSidebarContainer/>
+            break
+        default:
+            sidebarContent = 'Missing Content'
+    }
 
-  return <Sidebar isRight={true}>{sidebarContent}</Sidebar>;
-};
+    return <Sidebar isRight={true}>{sidebarContent}</Sidebar>
+}
 
-export default TopologySidebarComponent;
+export default TopologySidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index f16c19f0..00965c18 100644
--- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -1,20 +1,21 @@
-import React from "react";
-import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer";
+import React from 'react'
+import NewRoomConstructionContainer
+    from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
 
 const BuildingSidebarComponent = ({ inSimulation }) => {
-  return (
-    <div>
-      <h2>Building</h2>
-      {inSimulation ? (
-        <div className="alert alert-info">
-          <span className="fa fa-info-circle mr-2" />
-          <strong>Click on individual rooms</strong> to see their stats!
+    return (
+        <div>
+            <h2>Building</h2>
+            {inSimulation ? (
+                <div className="alert alert-info">
+                    <span className="fa fa-info-circle mr-2"/>
+                    <strong>Click on individual rooms</strong> to see their stats!
+                </div>
+            ) : (
+                <NewRoomConstructionContainer/>
+            )}
         </div>
-      ) : (
-        <NewRoomConstructionContainer />
-      )}
-    </div>
-  );
-};
+    )
+}
 
-export default BuildingSidebarComponent;
+export default BuildingSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index 7b049642..362483bf 100644
--- a/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -1,31 +1,31 @@
-import React from "react";
+import React from 'react'
 
 const NewRoomConstructionComponent = ({
-  onStart,
-  onFinish,
-  onCancel,
-  currentRoomInConstruction
-}) => {
-  if (currentRoomInConstruction === -1) {
+                                          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"/>
+                Construct a new room
+            </div>
+        )
+    }
     return (
-      <div className="btn btn-outline-primary btn-block" onClick={onStart}>
-        <span className="fa fa-plus mr-2" />
-        Construct a new room
-      </div>
-    );
-  }
-  return (
-    <div>
-      <div className="btn btn-primary btn-block" onClick={onFinish}>
-        <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" />
-        Cancel construction
-      </div>
-    </div>
-  );
-};
+        <div>
+            <div className="btn btn-primary btn-block" onClick={onFinish}>
+                <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"/>
+                Cancel construction
+            </div>
+        </div>
+    )
+}
 
-export default NewRoomConstructionComponent;
+export default NewRoomConstructionComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 7f56aca0..d7ce24bc 100644
--- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const BackToRackComponent = ({ onClick }) => (
-  <div className="btn btn-secondary btn-block" onClick={onClick}>
-    <span className="fa fa-angle-left mr-2" />
-    Back to rack
-  </div>
-);
+    <div className="btn btn-secondary btn-block" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to rack
+    </div>
+)
 
-export default BackToRackComponent;
+export default BackToRackComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index d8774bf9..b9aa6251 100644
--- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const DeleteMachineComponent = ({ onClick }) => (
-  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-    <span className="fa fa-trash mr-2" />
-    Delete this machine
-  </div>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this machine
+    </div>
+)
 
-export default DeleteMachineComponent;
+export default DeleteMachineComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 0ad8b79c..70be6968 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react'
 
 const MachineNameComponent = ({ position }) => (
-  <h2>Machine at slot {position}</h2>
-);
+    <h2>Machine at slot {position}</h2>
+)
 
-export default MachineNameComponent;
+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 5ccaf25c..66c8c84f 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,27 +1,27 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer";
-import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer";
-import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer";
-import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer";
+import React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer'
+import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer'
+import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer'
+import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer'
 
 const MachineSidebarComponent = ({ inSimulation, machineId }) => {
-  return (
-    <div>
-      <MachineNameContainer />
-      <BackToRackContainer />
-      {inSimulation ? (
+    return (
         <div>
-          <LoadBarContainer objectType="machine" objectId={machineId} />
-          <LoadChartContainer objectType="machine" objectId={machineId} />
+            <MachineNameContainer/>
+            <BackToRackContainer/>
+            {inSimulation ? (
+                <div>
+                    <LoadBarContainer objectType="machine" objectId={machineId}/>
+                    <LoadChartContainer objectType="machine" objectId={machineId}/>
+                </div>
+            ) : (
+                <DeleteMachineContainer/>
+            )}
+            <UnitTabsContainer/>
         </div>
-      ) : (
-        <DeleteMachineContainer />
-      )}
-      <UnitTabsContainer />
-    </div>
-  );
-};
+    )
+}
 
-export default MachineSidebarComponent;
+export default MachineSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index 0c903228..57e219fd 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -1,46 +1,46 @@
-import PropTypes from "prop-types";
-import React from "react";
+import PropTypes from 'prop-types'
+import React from 'react'
 
 class UnitAddComponent extends React.Component {
-  static propTypes = {
-    units: PropTypes.array.isRequired,
-    onAdd: PropTypes.func.isRequired
-  };
+    static propTypes = {
+        units: PropTypes.array.isRequired,
+        onAdd: PropTypes.func.isRequired,
+    }
 
-  render() {
-    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 => (
-              <option value={unit.id} key={unit.id}>
-                {unit.manufacturer +
-                  " " +
-                  unit.family +
-                  " " +
-                  unit.model +
-                  " " +
-                  unit.generation}
-              </option>
-            ))}
-          </select>
-          <button
-            type="submit"
-            className="btn btn-outline-primary"
-            onClick={() =>
-              this.props.onAdd(parseInt(this.unitSelect.value, 10))
-            }
-          >
-            <span className="fa fa-plus mr-2" />
-            Add
-          </button>
-        </div>
-      </div>
-    );
-  }
+    render() {
+        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 => (
+                            <option value={unit.id} key={unit.id}>
+                                {unit.manufacturer +
+                                ' ' +
+                                unit.family +
+                                ' ' +
+                                unit.model +
+                                ' ' +
+                                unit.generation}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        type="submit"
+                        className="btn btn-outline-primary"
+                        onClick={() =>
+                            this.props.onAdd(parseInt(this.unitSelect.value, 10))
+                        }
+                    >
+                        <span className="fa fa-plus mr-2"/>
+                        Add
+                    </button>
+                </div>
+            </div>
+        )
+    }
 }
 
-export default UnitAddComponent;
+export default UnitAddComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index 7c27043d..93ac1cdd 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,78 +1,78 @@
-import React from "react";
-import jQuery from "../../../../../util/jquery";
+import React from 'react'
+import jQuery from '../../../../../util/jquery'
 
 class UnitComponent extends React.Component {
-  componentDidMount() {
-    jQuery(".unit-info-popover").popover({
-      trigger: "focus"
-    });
-  }
-
-  render() {
-    let unitInfo;
-    if (this.props.unitType === "cpu" || this.props.unitType === "gpu") {
-      unitInfo =
-        "<strong>Clockrate:</strong> <code>" +
-        this.props.unit.clockRateMhz +
-        " MHz</code><br/>" +
-        "<strong>Num. Cores:</strong> <code>" +
-        this.props.unit.numberOfCores +
-        "</code><br/>" +
-        "<strong>Energy Cons.:</strong> <code>" +
-        this.props.unit.energyConsumptionW +
-        " W</code>";
-    } else if (
-      this.props.unitType === "memory" ||
-      this.props.unitType === "storage"
-    ) {
-      unitInfo =
-        "<strong>Speed:</strong> <code>" +
-        this.props.unit.speedMbPerS +
-        " Mb/s</code><br/>" +
-        "<strong>Size:</strong> <code>" +
-        this.props.unit.sizeMb +
-        " MB</code><br/>" +
-        "<strong>Energy Cons.:</strong> <code> " +
-        this.props.unit.energyConsumptionW +
-        " W</code>";
+    componentDidMount() {
+        jQuery('.unit-info-popover').popover({
+            trigger: 'focus',
+        })
     }
 
-    return (
-      <li className="d-flex list-group-item justify-content-between align-items-center">
-        <span style={{ maxWidth: "60%" }}>
+    render() {
+        let unitInfo
+        if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') {
+            unitInfo =
+                '<strong>Clockrate:</strong> <code>' +
+                this.props.unit.clockRateMhz +
+                ' MHz</code><br/>' +
+                '<strong>Num. Cores:</strong> <code>' +
+                this.props.unit.numberOfCores +
+                '</code><br/>' +
+                '<strong>Energy Cons.:</strong> <code>' +
+                this.props.unit.energyConsumptionW +
+                ' W</code>'
+        } else if (
+            this.props.unitType === 'memory' ||
+            this.props.unitType === 'storage'
+        ) {
+            unitInfo =
+                '<strong>Speed:</strong> <code>' +
+                this.props.unit.speedMbPerS +
+                ' Mb/s</code><br/>' +
+                '<strong>Size:</strong> <code>' +
+                this.props.unit.sizeMb +
+                ' MB</code><br/>' +
+                '<strong>Energy Cons.:</strong> <code> ' +
+                this.props.unit.energyConsumptionW +
+                ' W</code>'
+        }
+
+        return (
+            <li className="d-flex list-group-item justify-content-between align-items-center">
+        <span style={{ maxWidth: '60%' }}>
           {this.props.unit.manufacturer +
-            " " +
-            this.props.unit.family +
-            " " +
-            this.props.unit.model +
-            " " +
-            this.props.unit.generation}
+          ' ' +
+          this.props.unit.family +
+          ' ' +
+          this.props.unit.model +
+          ' ' +
+          this.props.unit.generation}
         </span>
-        <span>
+                <span>
           <span
-            tabIndex="0"
-            className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
-            role="button"
-            data-toggle="popover"
-            data-trigger="focus"
-            title="Unit information"
-            data-content={unitInfo}
-            data-html="true"
+              tabIndex="0"
+              className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle"
+              role="button"
+              data-toggle="popover"
+              data-trigger="focus"
+              title="Unit information"
+              data-content={unitInfo}
+              data-html="true"
           />
-          {this.props.inSimulation ? (
-            undefined
-          ) : (
-            <span
-              className="btn btn-outline-danger"
-              onClick={this.props.onDelete}
-            >
-              <span className="fa fa-trash" />
+                    {this.props.inSimulation ? (
+                        undefined
+                    ) : (
+                        <span
+                            className="btn btn-outline-danger"
+                            onClick={this.props.onDelete}
+                        >
+              <span className="fa fa-trash"/>
             </span>
-          )}
+                    )}
         </span>
-      </li>
-    );
-  }
+            </li>
+        )
+    }
 }
 
-export default UnitComponent;
+export default UnitComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 38df806b..31d4db51 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,29 +1,29 @@
-import React from "react";
-import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer";
+import React from 'react'
+import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
 
 const UnitListComponent = ({ unitType, unitIds, inSimulation }) => (
-  <ul className="list-group mt-1">
-    {unitIds.length !== 0 ? (
-      unitIds.map((unitId, index) => (
-        <UnitContainer
-          unitType={unitType}
-          unitId={unitId}
-          index={index}
-          key={index}
-        />
-      ))
-    ) : (
-      <div className="alert alert-info">
-        {inSimulation ? (
-          <strong>No units of this type in this machine</strong>
+    <ul className="list-group mt-1">
+        {unitIds.length !== 0 ? (
+            unitIds.map((unitId, index) => (
+                <UnitContainer
+                    unitType={unitType}
+                    unitId={unitId}
+                    index={index}
+                    key={index}
+                />
+            ))
         ) : (
-          <span>
+            <div className="alert alert-info">
+                {inSimulation ? (
+                    <strong>No units of this type in this machine</strong>
+                ) : (
+                    <span>
             <strong>No units...</strong> Add some with the menu above!
           </span>
+                )}
+            </div>
         )}
-      </div>
-    )}
-  </ul>
-);
+    </ul>
+)
 
-export default UnitListComponent;
+export default UnitListComponent
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 0683c796..df7eeb77 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,65 +1,65 @@
-import React from "react";
-import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer";
-import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer";
+import React from 'react'
+import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
+import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
 
 const UnitTabsComponent = ({ inSimulation }) => (
-  <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"
-        >
-          CPU
-        </a>
-      </li>
-      <li className="nav-item">
-        <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">
-          GPU
-        </a>
-      </li>
-      <li className="nav-item">
-        <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"
-        >
-          Storage
-        </a>
-      </li>
-    </ul>
-    <div className="tab-content">
-      <div className="tab-pane active" id="cpu-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />}
-        <UnitListContainer unitType="cpu" />
-      </div>
-      <div className="tab-pane" id="gpu-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />}
-        <UnitListContainer unitType="gpu" />
-      </div>
-      <div className="tab-pane" id="memory-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="memory" />}
-        <UnitListContainer unitType="memory" />
-      </div>
-      <div className="tab-pane" id="storage-units" role="tabpanel">
-        {inSimulation ? undefined : <UnitAddContainer unitType="storage" />}
-        <UnitListContainer unitType="storage" />
-      </div>
+    <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"
+                >
+                    CPU
+                </a>
+            </li>
+            <li className="nav-item">
+                <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">
+                    GPU
+                </a>
+            </li>
+            <li className="nav-item">
+                <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"
+                >
+                    Storage
+                </a>
+            </li>
+        </ul>
+        <div className="tab-content">
+            <div className="tab-pane active" id="cpu-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>}
+                <UnitListContainer unitType="cpu"/>
+            </div>
+            <div className="tab-pane" id="gpu-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>}
+                <UnitListContainer unitType="gpu"/>
+            </div>
+            <div className="tab-pane" id="memory-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>}
+                <UnitListContainer unitType="memory"/>
+            </div>
+            <div className="tab-pane" id="storage-units" role="tabpanel">
+                {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>}
+                <UnitListContainer unitType="storage"/>
+            </div>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default UnitTabsComponent;
+export default UnitTabsComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
index 6bcf4088..345674d1 100644
--- a/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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" />
-    Back to room
-  </div>
-);
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to room
+    </div>
+)
 
-export default BackToRoomComponent;
+export default BackToRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index d8aa7634..b1672764 100644
--- a/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const DeleteRackComponent = ({ onClick }) => (
-  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-    <span className="fa fa-trash mr-2" />
-    Delete this rack
-  </div>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this rack
+    </div>
+)
 
-export default DeleteRackComponent;
+export default DeleteRackComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index d86f9fee..f182a78c 100644
--- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,19 +1,19 @@
-import React from "react";
+import React from 'react'
 
 const EmptySlotComponent = ({ position, onAdd, inSimulation }) => (
-  <li className="list-group-item d-flex justify-content-between align-items-center">
+    <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>
-    {inSimulation ? (
-      <span className="badge badge-default badge-success">Empty Slot</span>
-    ) : (
-      <button className="btn btn-outline-primary" onClick={onAdd}>
-        <span className="fa fa-plus mr-2" />
-        Add machine
-      </button>
-    )}
-  </li>
-);
+        {inSimulation ? (
+            <span className="badge badge-default badge-success">Empty Slot</span>
+        ) : (
+            <button className="btn btn-outline-primary" onClick={onAdd}>
+                <span className="fa fa-plus mr-2"/>
+                Add machine
+            </button>
+        )}
+    </li>
+)
 
-export default EmptySlotComponent;
+export default EmptySlotComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
index 2521f4a2..0a1d1065 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,78 +1,78 @@
-import React from "react";
-import Shapes from "../../../../../shapes";
-import { convertLoadToSimulationColor } from "../../../../../util/simulation-load";
+import React from 'react'
+import Shapes from '../../../../../shapes'
+import { convertLoadToSimulationColor } from '../../../../../util/simulation-load'
 
 const UnitIcon = ({ id, type }) => (
-  <div>
-    <img
-      src={"/img/topology/" + id + "-icon.png"}
-      alt={"Machine contains " + type + " units"}
-      className="img-fluid ml-1"
-      style={{ maxHeight: "35px" }}
-    />
-  </div>
-);
+    <div>
+        <img
+            src={'/img/topology/' + id + '-icon.png'}
+            alt={'Machine contains ' + type + ' units'}
+            className="img-fluid ml-1"
+            style={{ maxHeight: '35px' }}
+        />
+    </div>
+)
 
 const MachineComponent = ({
-  position,
-  machine,
-  inSimulation,
-  machineLoad,
-  onClick
-}) => {
-  let color = "white";
-  if (inSimulation && machineLoad >= 0) {
-    color = convertLoadToSimulationColor(machineLoad);
-  }
-  const hasNoUnits =
-    machine.cpuIds.length +
-      machine.gpuIds.length +
-      machine.memoryIds.length +
-      machine.storageIds.length ===
-    0;
+                              position,
+                              machine,
+                              inSimulation,
+                              machineLoad,
+                              onClick,
+                          }) => {
+    let color = 'white'
+    if (inSimulation && machineLoad >= 0) {
+        color = convertLoadToSimulationColor(machineLoad)
+    }
+    const hasNoUnits =
+        machine.cpuIds.length +
+        machine.gpuIds.length +
+        machine.memoryIds.length +
+        machine.storageIds.length ===
+        0
 
-  return (
-    <li
-      className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
-      onClick={onClick}
-      style={{ backgroundColor: color }}
-    >
-      <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
-        )}
-        {hasNoUnits ? (
-          <span className="badge badge-default badge-warning">
+    return (
+        <li
+            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+            onClick={onClick}
+            style={{ backgroundColor: color }}
+        >
+            <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
+                )}
+                {hasNoUnits ? (
+                    <span className="badge badge-default badge-warning">
             Machine with no units
           </span>
-        ) : (
-          undefined
-        )}
-      </div>
-    </li>
-  );
-};
+                ) : (
+                    undefined
+                )}
+            </div>
+        </li>
+    )
+}
 
 MachineComponent.propTypes = {
-  machine: Shapes.Machine
-};
+    machine: Shapes.Machine,
+}
 
-export default MachineComponent;
+export default MachineComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index d5521557..a381771c 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,26 +1,26 @@
-import React from "react";
-import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer";
-import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer";
-import "./MachineListComponent.css";
+import React from 'react'
+import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
+import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
+import './MachineListComponent.css'
 
 const MachineListComponent = ({ machineIds }) => {
-  return (
-    <ul className="list-group machine-list">
-      {machineIds.map((machineId, index) => {
-        if (machineId === null) {
-          return <EmptySlotContainer key={index} position={index + 1} />;
-        } else {
-          return (
-            <MachineContainer
-              key={index}
-              position={index + 1}
-              machineId={machineId}
-            />
-          );
-        }
-      })}
-    </ul>
-  );
-};
+    return (
+        <ul className="list-group machine-list">
+            {machineIds.map((machineId, index) => {
+                if (machineId === null) {
+                    return <EmptySlotContainer key={index} position={index + 1}/>
+                } else {
+                    return (
+                        <MachineContainer
+                            key={index}
+                            position={index + 1}
+                            machineId={machineId}
+                        />
+                    )
+                }
+            })}
+        </ul>
+    )
+}
 
-export default MachineListComponent;
+export default MachineListComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
index bbcfe696..11b82c93 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.sass
@@ -1,2 +1,2 @@
 .machine-list li
-  min-height: 64px
+    min-height: 64px
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
index 5e095823..1888b69d 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import NameComponent from "../NameComponent";
+import React from 'react'
+import NameComponent from '../NameComponent'
 
 const RackNameComponent = ({ rackName, onEdit }) => (
-  <NameComponent name={rackName} onEdit={onEdit} />
-);
+    <NameComponent name={rackName} onEdit={onEdit}/>
+)
 
-export default RackNameComponent;
+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 f832b9b9..47d99254 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -1,34 +1,34 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer";
-import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer";
-import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer";
-import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer";
-import "./RackSidebarComponent.css";
+import React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+import BackToRoomContainer from '../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer'
+import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
+import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
+import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
+import './RackSidebarComponent.css'
 
 const RackSidebarComponent = ({ inSimulation, rackId }) => {
-  return (
-    <div className="rack-sidebar-container flex-column">
-      <div className="rack-sidebar-header-container">
-        <RackNameContainer />
-        <BackToRoomContainer />
-        {inSimulation ? (
-          <div>
-            <LoadBarContainer objectType="rack" objectId={rackId} />
-            <LoadChartContainer objectType="rack" objectId={rackId} />
-          </div>
-        ) : (
-          <div>
-            <DeleteRackContainer />
-          </div>
-        )}
-      </div>
-      <div className="machine-list-container mt-2">
-        <MachineListContainer />
-      </div>
-    </div>
-  );
-};
+    return (
+        <div className="rack-sidebar-container flex-column">
+            <div className="rack-sidebar-header-container">
+                <RackNameContainer/>
+                <BackToRoomContainer/>
+                {inSimulation ? (
+                    <div>
+                        <LoadBarContainer objectType="rack" objectId={rackId}/>
+                        <LoadChartContainer objectType="rack" objectId={rackId}/>
+                    </div>
+                ) : (
+                    <div>
+                        <DeleteRackContainer/>
+                    </div>
+                )}
+            </div>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
+        </div>
+    )
+}
 
-export default RackSidebarComponent;
+export default RackSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
index 822804bc..29fec02a 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
@@ -1,11 +1,11 @@
 .rack-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
+    display: flex
+    height: 100%
+    max-height: 100%
 
 .rack-sidebar-header-container
-  flex: 0
+    flex: 0
 
 .machine-list-container
-  flex: 1
-  overflow-y: scroll
+    flex: 1
+    overflow-y: scroll
diff --git a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
index 0409dbdd..7bd8c2f8 100644
--- a/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+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" />
-    Back to building
-  </div>
-);
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to building
+    </div>
+)
 
-export default BackToBuildingComponent;
+export default BackToBuildingComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 3e3b3b36..2be752b5 100644
--- a/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React from 'react'
 
 const DeleteRoomComponent = ({ onClick }) => (
-  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
-    <span className="fa fa-trash mr-2" />
-    Delete this room
-  </div>
-);
+    <div className="btn btn-outline-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this room
+    </div>
+)
 
-export default DeleteRoomComponent;
+export default DeleteRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
index c3b9f0ad..672a191f 100644
--- a/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/EditRoomComponent.js
@@ -1,27 +1,27 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 const EditRoomComponent = ({
-  onEdit,
-  onFinish,
-  isEditing,
-  isInRackConstructionMode
-}) =>
-  isEditing ? (
-    <div className="btn btn-info btn-block" onClick={onFinish}>
-      <span className="fa fa-check mr-2" />
-      Finish editing room
-    </div>
-  ) : (
-    <div
-      className={classNames("btn btn-outline-info btn-block", {
-        disabled: isInRackConstructionMode
-      })}
-      onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
-    >
-      <span className="fa fa-pencil mr-2" />
-      Edit the tiles of this room
-    </div>
-  );
+                               onEdit,
+                               onFinish,
+                               isEditing,
+                               isInRackConstructionMode,
+                           }) =>
+    isEditing ? (
+        <div className="btn btn-info btn-block" onClick={onFinish}>
+            <span className="fa fa-check mr-2"/>
+            Finish editing room
+        </div>
+    ) : (
+        <div
+            className={classNames('btn btn-outline-info btn-block', {
+                disabled: isInRackConstructionMode,
+            })}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+        >
+            <span className="fa fa-pencil mr-2"/>
+            Edit the tiles of this room
+        </div>
+    )
 
-export default EditRoomComponent;
+export default EditRoomComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 06b8a2aa..42b7357b 100644
--- a/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
+import classNames from 'classnames'
+import React from 'react'
 
 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" />
-        Stop rack construction
-      </div>
-    );
-  }
+                                       onStart,
+                                       onStop,
+                                       inRackConstructionMode,
+                                       isEditingRoom,
+                                   }) => {
+    if (inRackConstructionMode) {
+        return (
+            <div className="btn btn-primary btn-block" onClick={onStop}>
+                <span className="fa fa-times mr-2"/>
+                Stop rack construction
+            </div>
+        )
+    }
 
-  return (
-    <div
-      className={classNames("btn btn-outline-primary btn-block", {
-        disabled: isEditingRoom
-      })}
-      onClick={() => (isEditingRoom ? undefined : onStart())}
-    >
-      <span className="fa fa-plus mr-2" />
-      Start rack construction
-    </div>
-  );
-};
+    return (
+        <div
+            className={classNames('btn btn-outline-primary btn-block', {
+                disabled: isEditingRoom,
+            })}
+            onClick={() => (isEditingRoom ? undefined : onStart())}
+        >
+            <span className="fa fa-plus mr-2"/>
+            Start rack construction
+        </div>
+    )
+}
 
-export default RackConstructionComponent;
+export default RackConstructionComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
index 11b88edd..409d2eef 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import NameComponent from "../NameComponent";
+import React from 'react'
+import NameComponent from '../NameComponent'
 
 const RoomNameComponent = ({ roomName, onEdit }) => (
-  <NameComponent name={roomName} onEdit={onEdit} />
-);
+    <NameComponent name={roomName} onEdit={onEdit}/>
+)
 
-export default RoomNameComponent;
+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 275f9624..d9865744 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,38 +1,38 @@
-import React from "react";
-import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
-import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer";
-import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer";
-import EditRoomContainer from "../../../../../containers/app/sidebars/topology/room/EditRoomContainer";
-import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer";
-import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer";
-import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer";
+import React from 'react'
+import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer'
+import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer'
+import BackToBuildingContainer from '../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer'
+import DeleteRoomContainer from '../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer'
+import EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer'
+import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer'
+import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer'
+import RoomTypeContainer from '../../../../../containers/app/sidebars/topology/room/RoomTypeContainer'
 
 const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => {
-  let allowedObjects;
-  if (!inSimulation && roomType === "SERVER") {
-    allowedObjects = <RackConstructionContainer />;
-  }
+    let allowedObjects
+    if (!inSimulation && roomType === 'SERVER') {
+        allowedObjects = <RackConstructionContainer/>
+    }
 
-  return (
-    <div>
-      <RoomNameContainer />
-      <RoomTypeContainer />
-      <BackToBuildingContainer />
-      {inSimulation ? (
+    return (
         <div>
-          <LoadBarContainer objectType="room" objectId={roomId} />
-          <LoadChartContainer objectType="room" objectId={roomId} />
+            <RoomNameContainer/>
+            <RoomTypeContainer/>
+            <BackToBuildingContainer/>
+            {inSimulation ? (
+                <div>
+                    <LoadBarContainer objectType="room" objectId={roomId}/>
+                    <LoadChartContainer objectType="room" objectId={roomId}/>
+                </div>
+            ) : (
+                <div>
+                    {allowedObjects}
+                    <EditRoomContainer/>
+                    <DeleteRoomContainer/>
+                </div>
+            )}
         </div>
-      ) : (
-        <div>
-          {allowedObjects}
-          <EditRoomContainer />
-          <DeleteRoomContainer />
-        </div>
-      )}
-    </div>
-  );
-};
+    )
+}
 
-export default RoomSidebarComponent;
+export default RoomSidebarComponent
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
index 46d91c2c..b662307c 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomTypeComponent.js
@@ -1,8 +1,8 @@
-import React from "react";
-import { ROOM_TYPE_TO_NAME_MAP } from "../../../../../util/room-types";
+import React from 'react'
+import { ROOM_TYPE_TO_NAME_MAP } from '../../../../../util/room-types'
 
 const RoomTypeComponent = ({ roomType }) => (
-  <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p>
-);
+    <p className="lead">{ROOM_TYPE_TO_NAME_MAP[roomType]}</p>
+)
 
-export default RoomTypeComponent;
+export default RoomTypeComponent
diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js
index 1a9b0ced..7968c68d 100644
--- a/frontend/src/components/app/timeline/PlayButtonComponent.js
+++ b/frontend/src/components/app/timeline/PlayButtonComponent.js
@@ -1,30 +1,30 @@
-import React from "react";
+import React from 'react'
 
 const PlayButtonComponent = ({
-  isPlaying,
-  currentTick,
-  lastSimulatedTick,
-  onPlay,
-  onPause
-}) => (
-  <div
-    className="play-btn"
-    onClick={() => {
-      if (isPlaying) {
-        onPause();
-      } else {
-        if (currentTick !== lastSimulatedTick) {
-          onPlay();
-        }
-      }
-    }}
-  >
-    {isPlaying ? (
-      <span className="fa fa-pause" />
-    ) : (
-      <span className="fa fa-play" />
-    )}
-  </div>
-);
+                                 isPlaying,
+                                 currentTick,
+                                 lastSimulatedTick,
+                                 onPlay,
+                                 onPause,
+                             }) => (
+    <div
+        className="play-btn"
+        onClick={() => {
+            if (isPlaying) {
+                onPause()
+            } else {
+                if (currentTick !== lastSimulatedTick) {
+                    onPlay()
+                }
+            }
+        }}
+    >
+        {isPlaying ? (
+            <span className="fa fa-pause"/>
+        ) : (
+            <span className="fa fa-play"/>
+        )}
+    </div>
+)
 
-export default PlayButtonComponent;
+export default PlayButtonComponent
diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass
index 4c99a218..2d2cb979 100644
--- a/frontend/src/components/app/timeline/Timeline.sass
+++ b/frontend/src/components/app/timeline/Timeline.sass
@@ -7,110 +7,110 @@ $border-width: 1px
 $timeline-border: $border-width solid $gray-semi-dark
 
 .timeline-bar
-  display: block
-  position: absolute
-  left: 0
-  bottom: 20px
-  width: 100%
-  text-align: center
-  z-index: 2000
+    display: block
+    position: absolute
+    left: 0
+    bottom: 20px
+    width: 100%
+    text-align: center
+    z-index: 2000
 
-  pointer-events: none
+    pointer-events: none
 
 .timeline-container
-  display: inline-block
-  margin: 0 auto
-  text-align: left
+    display: inline-block
+    margin: 0 auto
+    text-align: left
 
-  width: $container-size
+    width: $container-size
 
 .timeline-labels
-  display: block
-  height: 25px
-  line-height: 25px
+    display: block
+    height: 25px
+    line-height: 25px
 
-  div
-    display: inline-block
+    div
+        display: inline-block
 
-  .start-time-label
-    margin-left: $play-btn-size - $border-width
-    padding-left: 4px
+    .start-time-label
+        margin-left: $play-btn-size - $border-width
+        padding-left: 4px
 
-  .end-time-label
-    padding-right: 4px
-    float: right
+    .end-time-label
+        padding-right: 4px
+        float: right
 
 .timeline-controls
-  display: flex
-  border: $timeline-border
-  overflow: hidden
+    display: flex
+    border: $timeline-border
+    overflow: hidden
 
-  pointer-events: all
+    pointer-events: all
 
-  +border-radius($standard-border-radius)
+    +border-radius($standard-border-radius)
 
-  .play-btn
-    width: $play-btn-size
-    height: $play-btn-size + $border-width
-    line-height: $play-btn-size + $border-width
-    text-align: center
-    float: left
-    margin-top: -$border-width
+    .play-btn
+        width: $play-btn-size
+        height: $play-btn-size + $border-width
+        line-height: $play-btn-size + $border-width
+        text-align: center
+        float: left
+        margin-top: -$border-width
 
-    font-size: 16pt
-    background: #333
-    color: #eee
+        font-size: 16pt
+        background: #333
+        color: #eee
 
-    +transition(background, $transition-length)
-    +user-select
-    +clickable
+        +transition(background, $transition-length)
+        +user-select
+        +clickable
 
-  .play-btn:hover
-    background: #656565
+    .play-btn:hover
+        background: #656565
 
-  .play-btn:active
-    background: #000
+    .play-btn:active
+        background: #000
 
-  .timeline
-    position: relative
-    flex: 1
-    height: $play-btn-size
-    line-height: $play-btn-size
-    float: right
+    .timeline
+        position: relative
+        flex: 1
+        height: $play-btn-size
+        line-height: $play-btn-size
+        float: right
 
-    background: $blue-light
+        background: $blue-light
 
-    z-index: 500
+        z-index: 500
 
-    div
-      +transition(all, $transition-length)
+        div
+            +transition(all, $transition-length)
 
-    .time-marker
-      position: absolute
-      top: 0
-      left: 0
+        .time-marker
+            position: absolute
+            top: 0
+            left: 0
 
-      width: 6px
-      height: 100%
+            width: 6px
+            height: 100%
 
-      background: $blue-very-dark
+            background: $blue-very-dark
 
-      +border-radius(2px)
+            +border-radius(2px)
 
-      z-index: 503
+            z-index: 503
 
-      pointer-events: none
+            pointer-events: none
 
-    .section-marker
-      position: absolute
-      top: 0
-      left: 0
+        .section-marker
+            position: absolute
+            top: 0
+            left: 0
 
-      width: 3px
-      height: 100%
+            width: 3px
+            height: 100%
 
-      background: #222222
+            background: #222222
 
-      z-index: 504
+            z-index: 504
 
-      pointer-events: none
+            pointer-events: none
diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js
index 0f88b8f4..c183c0e8 100644
--- a/frontend/src/components/app/timeline/TimelineComponent.js
+++ b/frontend/src/components/app/timeline/TimelineComponent.js
@@ -1,37 +1,37 @@
-import React from "react";
-import TimelineControlsContainer from "../../../containers/app/timeline/TimelineControlsContainer";
-import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLabelsContainer";
-import "./Timeline.css";
+import React from 'react'
+import TimelineControlsContainer from '../../../containers/app/timeline/TimelineControlsContainer'
+import TimelineLabelsContainer from '../../../containers/app/timeline/TimelineLabelsContainer'
+import './Timeline.css'
 
 class TimelineComponent extends React.Component {
-  componentDidMount() {
-    this.interval = setInterval(() => {
-      if (!this.props.isPlaying) {
-        return;
-      }
+    componentDidMount() {
+        this.interval = setInterval(() => {
+            if (!this.props.isPlaying) {
+                return
+            }
 
-      if (this.props.currentTick < this.props.lastSimulatedTick) {
-        this.props.incrementTick();
-      } else {
-        this.props.pauseSimulation();
-      }
-    }, 1000);
-  }
+            if (this.props.currentTick < this.props.lastSimulatedTick) {
+                this.props.incrementTick()
+            } else {
+                this.props.pauseSimulation()
+            }
+        }, 1000)
+    }
 
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
+    componentWillUnmount() {
+        clearInterval(this.interval)
+    }
 
-  render() {
-    return (
-      <div className="timeline-bar">
-        <div className="timeline-container">
-          <TimelineLabelsContainer />
-          <TimelineControlsContainer />
-        </div>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div className="timeline-bar">
+                <div className="timeline-container">
+                    <TimelineLabelsContainer/>
+                    <TimelineControlsContainer/>
+                </div>
+            </div>
+        )
+    }
 }
 
-export default TimelineComponent;
+export default TimelineComponent
diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js
index f3d55154..5412b1f5 100644
--- a/frontend/src/components/app/timeline/TimelineControlsComponent.js
+++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js
@@ -1,49 +1,49 @@
-import React from "react";
-import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer";
-import { convertTickToPercentage } from "../../../util/timeline";
+import React from 'react'
+import PlayButtonContainer from '../../../containers/app/timeline/PlayButtonContainer'
+import { convertTickToPercentage } from '../../../util/timeline'
 
 class TimelineControlsComponent extends React.Component {
-  onTimelineClick(e) {
-    const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth;
-    const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1));
-    this.props.goToTick(tick);
-  }
+    onTimelineClick(e) {
+        const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth
+        const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1))
+        this.props.goToTick(tick)
+    }
 
-  render() {
-    return (
-      <div className="timeline-controls">
-        <PlayButtonContainer />
-        <div
-          className="timeline"
-          ref={timeline => (this.timeline = timeline)}
-          onClick={this.onTimelineClick.bind(this)}
-        >
-          <div
-            className="time-marker"
-            style={{
-              left: convertTickToPercentage(
-                this.props.currentTick,
-                this.props.lastSimulatedTick
-              )
-            }}
-          />
-          {this.props.sectionTicks.map(sectionTick => (
-            <div
-              key={sectionTick}
-              className="section-marker"
-              style={{
-                left: convertTickToPercentage(
-                  sectionTick,
-                  this.props.lastSimulatedTick
-                )
-              }}
-              title="Topology changes at this tick"
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div className="timeline-controls">
+                <PlayButtonContainer/>
+                <div
+                    className="timeline"
+                    ref={timeline => (this.timeline = timeline)}
+                    onClick={this.onTimelineClick.bind(this)}
+                >
+                    <div
+                        className="time-marker"
+                        style={{
+                            left: convertTickToPercentage(
+                                this.props.currentTick,
+                                this.props.lastSimulatedTick,
+                            ),
+                        }}
+                    />
+                    {this.props.sectionTicks.map(sectionTick => (
+                        <div
+                            key={sectionTick}
+                            className="section-marker"
+                            style={{
+                                left: convertTickToPercentage(
+                                    sectionTick,
+                                    this.props.lastSimulatedTick,
+                                ),
+                            }}
+                            title="Topology changes at this tick"
+                        />
+                    ))}
+                </div>
+            </div>
+        )
+    }
 }
 
-export default TimelineControlsComponent;
+export default TimelineControlsComponent
diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
index 6943a86f..55818d24 100644
--- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js
+++ b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
@@ -1,15 +1,15 @@
-import React from "react";
-import { convertSecondsToFormattedTime } from "../../../util/date-time";
+import React from 'react'
+import { convertSecondsToFormattedTime } from '../../../util/date-time'
 
 const TimelineLabelsComponent = ({ currentTick, lastSimulatedTick }) => (
-  <div className="timeline-labels">
-    <div className="start-time-label">
-      {convertSecondsToFormattedTime(currentTick)}
+    <div className="timeline-labels">
+        <div className="start-time-label">
+            {convertSecondsToFormattedTime(currentTick)}
+        </div>
+        <div className="end-time-label">
+            {convertSecondsToFormattedTime(lastSimulatedTick)}
+        </div>
     </div>
-    <div className="end-time-label">
-      {convertSecondsToFormattedTime(lastSimulatedTick)}
-    </div>
-  </div>
-);
+)
 
-export default TimelineLabelsComponent;
+export default TimelineLabelsComponent
diff --git a/frontend/src/components/experiments/ExperimentListComponent.js b/frontend/src/components/experiments/ExperimentListComponent.js
index 2f7106e5..55a7ff6d 100644
--- a/frontend/src/components/experiments/ExperimentListComponent.js
+++ b/frontend/src/components/experiments/ExperimentListComponent.js
@@ -1,59 +1,59 @@
-import PropTypes from "prop-types";
-import React from "react";
-import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
+import PropTypes from 'prop-types'
+import React from 'react'
+import ExperimentRowContainer from '../../containers/experiments/ExperimentRowContainer'
 
 const ExperimentListComponent = ({ experimentIds, loading }) => {
-  let alert;
+    let alert
 
-  if (loading) {
-    alert = (
-      <div className="alert alert-success">
-        <span className="fa fa-refresh fa-spin mr-2" />
-        <strong>Loading Experiments...</strong>
-      </div>
-    );
-  } else if (experimentIds.length === 0 && !loading) {
-    alert = (
-      <div className="alert alert-info">
-        <span className="fa fa-question-circle mr-2" />
-        <strong>No experiments here yet...</strong> Add some with the button
-        below!
-      </div>
-    );
-  }
+    if (loading) {
+        alert = (
+            <div className="alert alert-success">
+                <span className="fa fa-refresh fa-spin mr-2"/>
+                <strong>Loading Experiments...</strong>
+            </div>
+        )
+    } else if (experimentIds.length === 0 && !loading) {
+        alert = (
+            <div className="alert alert-info">
+                <span className="fa fa-question-circle mr-2"/>
+                <strong>No experiments here yet...</strong> Add some with the button
+                below!
+            </div>
+        )
+    }
 
-  return (
-    <div className="vertically-expanding-container">
-      {alert ? (
-        alert
-      ) : (
-        <table className="table table-striped">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Path</th>
-              <th>Trace</th>
-              <th>Scheduler</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {experimentIds.map(experimentId => (
-              <ExperimentRowContainer
-                experimentId={experimentId}
-                key={experimentId}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-};
+    return (
+        <div className="vertically-expanding-container">
+            {alert ? (
+                alert
+            ) : (
+                <table className="table table-striped">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Path</th>
+                        <th>Trace</th>
+                        <th>Scheduler</th>
+                        <th/>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {experimentIds.map(experimentId => (
+                        <ExperimentRowContainer
+                            experimentId={experimentId}
+                            key={experimentId}
+                        />
+                    ))}
+                    </tbody>
+                </table>
+            )}
+        </div>
+    )
+}
 
 ExperimentListComponent.propTypes = {
-  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
-  loading: PropTypes.bool
-};
+    experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+    loading: PropTypes.bool,
+}
 
-export default ExperimentListComponent;
+export default ExperimentListComponent
diff --git a/frontend/src/components/experiments/ExperimentRowComponent.js b/frontend/src/components/experiments/ExperimentRowComponent.js
index e71c6a00..8a2638a7 100644
--- a/frontend/src/components/experiments/ExperimentRowComponent.js
+++ b/frontend/src/components/experiments/ExperimentRowComponent.js
@@ -1,40 +1,40 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Link } from "react-router-dom";
-import Shapes from "../../shapes/index";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import Shapes from '../../shapes/index'
 
 const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => (
-  <tr>
-    <td className="pt-3">{experiment.name}</td>
-    <td className="pt-3">
-      {experiment.path.name
-        ? experiment.path.name
-        : "Path " + experiment.path.id}
-    </td>
-    <td className="pt-3">{experiment.trace.name}</td>
-    <td className="pt-3">{experiment.scheduler.name}</td>
-    <td className="text-right">
-      <Link
-        to={"/simulations/" + simulationId + "/experiments/" + experiment.id}
-        className="btn btn-outline-primary btn-sm mr-2"
-        title="Open this experiment"
-      >
-        <span className="fa fa-play" />
-      </Link>
-      <div
-        className="btn btn-outline-danger btn-sm"
-        title="Delete this experiment"
-        onClick={() => onDelete(experiment.id)}
-      >
-        <span className="fa fa-trash" />
-      </div>
-    </td>
-  </tr>
-);
+    <tr>
+        <td className="pt-3">{experiment.name}</td>
+        <td className="pt-3">
+            {experiment.path.name
+                ? experiment.path.name
+                : 'Path ' + experiment.path.id}
+        </td>
+        <td className="pt-3">{experiment.trace.name}</td>
+        <td className="pt-3">{experiment.scheduler.name}</td>
+        <td className="text-right">
+            <Link
+                to={'/simulations/' + simulationId + '/experiments/' + experiment.id}
+                className="btn btn-outline-primary btn-sm mr-2"
+                title="Open this experiment"
+            >
+                <span className="fa fa-play"/>
+            </Link>
+            <div
+                className="btn btn-outline-danger btn-sm"
+                title="Delete this experiment"
+                onClick={() => onDelete(experiment.id)}
+            >
+                <span className="fa fa-trash"/>
+            </div>
+        </td>
+    </tr>
+)
 
 ExperimentRowComponent.propTypes = {
-  experiment: Shapes.Experiment.isRequired,
-  simulationId: PropTypes.number.isRequired
-};
+    experiment: Shapes.Experiment.isRequired,
+    simulationId: PropTypes.string.isRequired,
+}
 
-export default ExperimentRowComponent;
+export default ExperimentRowComponent
diff --git a/frontend/src/components/experiments/NewExperimentButtonComponent.js b/frontend/src/components/experiments/NewExperimentButtonComponent.js
index 651172e3..2902825d 100644
--- a/frontend/src/components/experiments/NewExperimentButtonComponent.js
+++ b/frontend/src/components/experiments/NewExperimentButtonComponent.js
@@ -1,17 +1,17 @@
-import PropTypes from "prop-types";
-import React from "react";
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const NewExperimentButtonComponent = ({ onClick }) => (
-  <div className="bottom-btn-container">
-    <div className="btn btn-primary float-right" onClick={onClick}>
-      <span className="fa fa-plus mr-2" />
-      New Experiment
+    <div className="bottom-btn-container">
+        <div className="btn btn-primary float-right" onClick={onClick}>
+            <span className="fa fa-plus mr-2"/>
+            New Experiment
+        </div>
     </div>
-  </div>
-);
+)
 
 NewExperimentButtonComponent.propTypes = {
-  onClick: PropTypes.func.isRequired
-};
+    onClick: PropTypes.func.isRequired,
+}
 
-export default NewExperimentButtonComponent;
+export default NewExperimentButtonComponent
diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index f6c9c5d8..1ac2202c 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -1,64 +1,64 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import "./ContactSection.css";
-import ContentSection from "./ContentSection";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import './ContactSection.css'
+import ContentSection from './ContentSection'
 
 const ContactSection = () => (
-  <ContentSection name="contact" title="Contact">
-    <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" />
-          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" />
-          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"
-        />
-      </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"
-        >
-          <strong>@Large Research Group</strong>
-        </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{" "}
-        <strong>
-          <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">
-            license
-          </a>
-        </strong>). Sorry for the inconvenience.
-      </div>
-    </div>
-  </ContentSection>
-);
+    <ContentSection name="contact" title="Contact">
+        <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"/>
+                    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"/>
+                    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"
+                />
+            </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"
+                >
+                    <strong>@Large Research Group</strong>
+                </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{' '}
+                <strong>
+                    <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.md">
+                        license
+                    </a>
+                </strong>). Sorry for the inconvenience.
+            </div>
+        </div>
+    </ContentSection>
+)
 
-export default ContactSection;
+export default ContactSection
diff --git a/frontend/src/components/home/ContactSection.sass b/frontend/src/components/home/ContactSection.sass
index 2cde7391..997f8d98 100644
--- a/frontend/src/components/home/ContactSection.sass
+++ b/frontend/src/components/home/ContactSection.sass
@@ -1,15 +1,15 @@
 .contact-section
-  background-color: #444
-  color: #ddd
-
-  a
+    background-color: #444
     color: #ddd
 
-  a:hover
-    color: #fff
+    a
+        color: #ddd
+
+    a:hover
+        color: #fff
 
-  .tudelft-icon
-    height: 100px
+    .tudelft-icon
+        height: 100px
 
-  .disclaimer
-    color: #cccccc
+    .disclaimer
+        color: #cccccc
diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js
index 2e24ee10..ba2e4ec3 100644
--- a/frontend/src/components/home/ContentSection.js
+++ b/frontend/src/components/home/ContentSection.js
@@ -1,19 +1,19 @@
-import classNames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
-import "./ContentSection.css";
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import './ContentSection.css'
 
 const ContentSection = ({ name, title, children }) => (
-  <div id={name} className={classNames(name + "-section", "content-section")}>
-    <div className="container">
-      <h1>{title}</h1>
-      {children}
+    <div id={name} className={classNames(name + '-section', 'content-section')}>
+        <div className="container">
+            <h1>{title}</h1>
+            {children}
+        </div>
     </div>
-  </div>
-);
+)
 
 ContentSection.propTypes = {
-  name: PropTypes.string.isRequired
-};
+    name: PropTypes.string.isRequired,
+}
 
-export default ContentSection;
+export default ContentSection
diff --git a/frontend/src/components/home/ContentSection.sass b/frontend/src/components/home/ContentSection.sass
index 67541179..a4c8bd66 100644
--- a/frontend/src/components/home/ContentSection.sass
+++ b/frontend/src/components/home/ContentSection.sass
@@ -1,9 +1,9 @@
 @import ../../style-globals/_variables.sass
 
 .content-section
-  padding-top: 50px
-  padding-bottom: 100px
-  text-align: center
+    padding-top: 50px
+    padding-bottom: 150px
+    text-align: center
 
-  h1
-    margin-bottom: 30px
+    h1
+        margin-bottom: 30px
diff --git a/frontend/src/components/home/IntroSection.js b/frontend/src/components/home/IntroSection.js
index 59f5face..a799272a 100644
--- a/frontend/src/components/home/IntroSection.js
+++ b/frontend/src/components/home/IntroSection.js
@@ -1,40 +1,40 @@
-import React from "react";
+import React from 'react'
 
 const IntroSection = () => (
-  <section id="intro" className="intro-section">
-    <div className="container pt-5 pb-3">
-      <div className="row justify-content-center">
-        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-          <h4>The datacenter (DC) industry...</h4>
-          <ul>
-            <li>Is worth over $15 bn, and growing</li>
-            <li>Has many hard-to-grasp concepts</li>
-            <li>Needs to become accessible to many</li>
-          </ul>
+    <section id="intro" className="intro-section">
+        <div className="container pt-5 pb-3">
+            <div className="row justify-content-center">
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <h4>The datacenter (DC) industry...</h4>
+                    <ul>
+                        <li>Is worth over $15 bn, and growing</li>
+                        <li>Has many hard-to-grasp concepts</li>
+                        <li>Needs to become accessible to many</li>
+                    </ul>
+                </div>
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <img
+                        src="img/datacenter-drawing.png"
+                        className="col-12 img-fluid"
+                        alt="Schematic top-down view of a datacenter"
+                    />
+                    <p className="col-12 figure-caption text-center">
+                        <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
+                            Image source
+                        </a>
+                    </p>
+                </div>
+                <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
+                    <h4>OpenDC provides...</h4>
+                    <ul>
+                        <li>Collaborative online DC modeling</li>
+                        <li>Diverse and effective DC simulation</li>
+                        <li>Exploratory DC performance feedback</li>
+                    </ul>
+                </div>
+            </div>
         </div>
-        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-          <img
-            src="img/datacenter-drawing.png"
-            className="col-12 img-fluid"
-            alt="Schematic top-down view of a datacenter"
-          />
-          <p className="col-12 figure-caption text-center">
-            <a href="http://www.dolphinhosts.co.uk/wp-content/uploads/2013/07/data-centers.gif">
-              Image source
-            </a>
-          </p>
-        </div>
-        <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8">
-          <h4>OpenDC provides...</h4>
-          <ul>
-            <li>Collaborative online DC modeling</li>
-            <li>Diverse and effective DC simulation</li>
-            <li>Exploratory DC performance feedback</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </section>
-);
+    </section>
+)
 
-export default IntroSection;
+export default IntroSection
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index 8a5312b3..d519e840 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -1,20 +1,20 @@
-import React from "react";
-import "./JumbotronHeader.css";
+import React from 'react'
+import './JumbotronHeader.css'
 
 const JumbotronHeader = () => (
-  <section className="jumbotron-header">
-    <div className="container">
-      <div className="jumbotron text-center">
-        <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" />
-      </div>
-    </div>
-  </section>
-);
+    <section className="jumbotron-header">
+        <div className="container">
+            <div className="jumbotron text-center">
+                <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"/>
+            </div>
+        </div>
+    </section>
+)
 
-export default JumbotronHeader;
+export default JumbotronHeader
diff --git a/frontend/src/components/home/JumbotronHeader.sass b/frontend/src/components/home/JumbotronHeader.sass
index b88b79f7..1b6a89fd 100644
--- a/frontend/src/components/home/JumbotronHeader.sass
+++ b/frontend/src/components/home/JumbotronHeader.sass
@@ -1,24 +1,24 @@
 .jumbotron-header
-  background: #00A6D6
+    background: #00A6D6
 
 .jumbotron
-  background-color: inherit
-  margin-bottom: 0
+    background-color: inherit
+    margin-bottom: 0
 
-  padding-top: 120px
-  padding-bottom: 120px
+    padding-top: 120px
+    padding-bottom: 120px
 
-  img
-    max-width: 110px
+    img
+        max-width: 110px
 
-  h1
-    color: #fff
-    font-size: 4.5em
+    h1
+        color: #fff
+        font-size: 4.5em
 
-    .dc
-      color: #fff
-      font-weight: bold
+        .dc
+            color: #fff
+            font-weight: bold
 
-  .lead
-    color: #fff
-    font-size: 1.4em
+    .lead
+        color: #fff
+        font-size: 1.4em
diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js
index 17834b0b..cdbb5a44 100644
--- a/frontend/src/components/home/ModelingSection.js
+++ b/frontend/src/components/home/ModelingSection.js
@@ -1,24 +1,24 @@
-import React from "react";
-import ScreenshotSection from "./ScreenshotSection";
+import React from 'react'
+import ScreenshotSection from './ScreenshotSection'
 
 const ModelingSection = () => (
-  <ScreenshotSection
-    name="modeling"
-    title="Datacenter Modeling"
-    imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
-    caption="Building a datacenter in OpenDC"
-    imageIsRight={true}
-  >
-    <h3>Collaboratively...</h3>
-    <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>Select from diverse scheduling policies</li>
-    </ul>
-  </ScreenshotSection>
-);
+    <ScreenshotSection
+        name="modeling"
+        title="Datacenter Modeling"
+        imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-construction.PNG"
+        caption="Building a datacenter in OpenDC"
+        imageIsRight={true}
+    >
+        <h3>Collaboratively...</h3>
+        <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>Select from diverse scheduling policies</li>
+        </ul>
+    </ScreenshotSection>
+)
 
-export default ModelingSection;
+export default ModelingSection
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index 42b8ac77..fdb55020 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
-import ContentSection from "./ContentSection";
-import "./ScreenshotSection.css";
+import classNames from 'classnames'
+import React from 'react'
+import ContentSection from './ContentSection'
+import './ScreenshotSection.css'
 
 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 }
-        )}
-      >
-        {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} />
-        <div className="row text-muted justify-content-center">{caption}</div>
-      </div>
-    </div>
-  </ContentSection>
-);
+                               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 },
+                )}
+            >
+                {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}/>
+                <div className="row text-muted justify-content-center">{caption}</div>
+            </div>
+        </div>
+    </ContentSection>
+)
 
-export default ScreenshotSection;
+export default ScreenshotSection
diff --git a/frontend/src/components/home/ScreenshotSection.sass b/frontend/src/components/home/ScreenshotSection.sass
index a349ad48..2f454cb4 100644
--- a/frontend/src/components/home/ScreenshotSection.sass
+++ b/frontend/src/components/home/ScreenshotSection.sass
@@ -1,5 +1,5 @@
 .screenshot
-  outline: 2px black solid
-  padding-left: 0
-  padding-right: 0
-  margin-bottom: 5px
+    outline: 2px black solid
+    padding-left: 0
+    padding-right: 0
+    margin-bottom: 5px
diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js
index 3961e549..0fa21c34 100644
--- a/frontend/src/components/home/SimulationSection.js
+++ b/frontend/src/components/home/SimulationSection.js
@@ -1,25 +1,25 @@
-import React from "react";
-import ScreenshotSection from "./ScreenshotSection";
+import React from 'react'
+import ScreenshotSection from './ScreenshotSection'
 
 const ModelingSection = () => (
-  <ScreenshotSection
-    name="simulation"
-    title="Datacenter Simulation"
-    imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
-    caption="Running an experiment in OpenDC"
-    imageIsRight={false}
-  >
-    <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>Play, pause, and skip around the informative simulation timeline</li>
-      <li>Visualize and demo live</li>
-    </ul>
-  </ScreenshotSection>
-);
+    <ScreenshotSection
+        name="simulation"
+        title="Datacenter Simulation"
+        imageUrl="https://github.com/atlarge-research/opendc/raw/master/images/opendc-frontend-simulation-zoom.PNG"
+        caption="Running an experiment in OpenDC"
+        imageIsRight={false}
+    >
+        <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>Play, pause, and skip around the informative simulation timeline</li>
+            <li>Visualize and demo live</li>
+        </ul>
+    </ScreenshotSection>
+)
 
-export default ModelingSection;
+export default ModelingSection
diff --git a/frontend/src/components/home/StakeholderSection.js b/frontend/src/components/home/StakeholderSection.js
index 6d25fd86..e547ebe0 100644
--- a/frontend/src/components/home/StakeholderSection.js
+++ b/frontend/src/components/home/StakeholderSection.js
@@ -1,42 +1,42 @@
-import React from "react";
-import ContentSection from "./ContentSection";
+import React from 'react'
+import ContentSection from './ContentSection'
 
 const Stakeholder = ({ name, title, subtitle }) => (
-  <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
-    <img
-      src={"img/stakeholders/" + name + ".png"}
-      className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
-      alt={title}
-    />
-    <div className="text-center mt-2">
-      <h4>{title}</h4>
-      <p>{subtitle}</p>
+    <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
+        <img
+            src={'img/stakeholders/' + name + '.png'}
+            className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid"
+            alt={title}
+        />
+        <div className="text-center mt-2">
+            <h4>{title}</h4>
+            <p>{subtitle}</p>
+        </div>
     </div>
-  </div>
-);
+)
 
 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"
-      />
-    </div>
-  </ContentSection>
-);
+    <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"
+            />
+        </div>
+    </ContentSection>
+)
 
-export default StakeholderSection;
+export default StakeholderSection
diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js
index b86655b4..2b7bb69d 100644
--- a/frontend/src/components/home/TeamSection.js
+++ b/frontend/src/components/home/TeamSection.js
@@ -1,56 +1,57 @@
-import React from "react";
-import ContentSection from "./ContentSection";
+import React from 'react'
+import ContentSection from './ContentSection'
 
 const TeamMember = ({ photoId, name, description }) => (
-  <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center">
-    <img
-      src={"img/portraits/" + photoId + ".png"}
-      className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
-      alt={name}
-    />
-    <div className="col-12">
-      <h4>{name}</h4>
-      <div className="team-member-description">{description}</div>
+    <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center">
+        <img
+            src={'img/portraits/' + photoId + '.png'}
+            className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
+            alt={name}
+        />
+        <div className="col-12">
+            <h4>{name}</h4>
+            <div className="team-member-description">{description}</div>
+        </div>
     </div>
-  </div>
-);
+)
 
 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="gandreadis"
-        name="Georgios Andreadis"
-        description="Technology Lead and Software Engineer responsible for the frontend web application"
-      />
-      <TeamMember
-        photoId="fmastenbroek"
-        name="Fabian Mastenbroek"
-        description="Software Engineer responsible for the datacenter simulator"
-      />
-      <TeamMember
-        photoId="loverweel"
-        name="Leon Overweel"
-        description="Software Engineer responsible for the web server, database, and API specification"
-      />
-    </div>
-    <div className="text-center lead mt-3">
-      See{" "}
-      <a
-        target="_blank"
-        href="http://atlarge.science/opendc#team"
-        rel="noopener noreferrer"
-      >
-        atlarge.science/opendc
-      </a>{" "}
-      for the full team!
-    </div>
-  </ContentSection>
-);
+    <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="loverweel"
+                name="Leon Overweel"
+                description="Product Lead and Software Engineer responsible for the web server, database, and
+                        API specification"
+            />
+            <TeamMember
+                photoId="gandreadis"
+                name="Georgios Andreadis"
+                description="Software Engineer responsible for the frontend web application"
+            />
+            <TeamMember
+                photoId="fmastenbroek"
+                name="Fabian Mastenbroek"
+                description="Software Engineer responsible for the datacenter simulator"
+            />
+        </div>
+        <div className="text-center lead mt-3">
+            See{' '}
+            <a
+                target="_blank"
+                href="http://atlarge.science/opendc#team"
+                rel="noopener noreferrer"
+            >
+                atlarge.science/opendc
+            </a>{' '}
+            for the full team!
+        </div>
+    </ContentSection>
+)
 
-export default TeamSection;
+export default TeamSection
diff --git a/frontend/src/components/home/TechnologiesSection.js b/frontend/src/components/home/TechnologiesSection.js
index fdcfc522..13d8ca02 100644
--- a/frontend/src/components/home/TechnologiesSection.js
+++ b/frontend/src/components/home/TechnologiesSection.js
@@ -1,42 +1,42 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import ContentSection from "./ContentSection";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import ContentSection from './ContentSection'
 
 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">
+    <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" />
+          <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 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" />
+          <FontAwesome name="television" className="mr-2"/>
           <strong>Server</strong>
         </span>
-        <span className="text-right">
+                <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">
+            </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" />
+          <FontAwesome name="database" className="mr-2"/>
           <strong>Database</strong>
         </span>
-        <span className="text-right">MariaDB</span>
-      </li>
-      <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+                <span className="text-right">MariaDB</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" />
+          <FontAwesome name="cogs" className="mr-2"/>
           <strong>Simulator</strong>
         </span>
-        <span className="text-right">Kotlin</span>
-      </li>
-    </ul>
-  </ContentSection>
-);
+                <span className="text-right">Kotlin</span>
+            </li>
+        </ul>
+    </ContentSection>
+)
 
-export default TechnologiesSection;
+export default TechnologiesSection
diff --git a/frontend/src/components/modals/ConfirmationModal.js b/frontend/src/components/modals/ConfirmationModal.js
index abdce5ac..589047dc 100644
--- a/frontend/src/components/modals/ConfirmationModal.js
+++ b/frontend/src/components/modals/ConfirmationModal.js
@@ -1,37 +1,37 @@
-import PropTypes from "prop-types";
-import React from "react";
-import Modal from "./Modal";
+import PropTypes from 'prop-types'
+import React from 'react'
+import Modal from './Modal'
 
 class ConfirmationModal extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
-    callback: PropTypes.func.isRequired
-  };
+    static propTypes = {
+        title: PropTypes.string.isRequired,
+        message: PropTypes.string.isRequired,
+        show: PropTypes.bool.isRequired,
+        callback: PropTypes.func.isRequired,
+    }
 
-  onConfirm() {
-    this.props.callback(true);
-  }
+    onConfirm() {
+        this.props.callback(true)
+    }
 
-  onCancel() {
-    this.props.callback(false);
-  }
+    onCancel() {
+        this.props.callback(false)
+    }
 
-  render() {
-    return (
-      <Modal
-        title={this.props.title}
-        show={this.props.show}
-        onSubmit={this.onConfirm.bind(this)}
-        onCancel={this.onCancel.bind(this)}
-        submitButtonType="danger"
-        submitButtonText="Confirm"
-      >
-        {this.props.message}
-      </Modal>
-    );
-  }
+    render() {
+        return (
+            <Modal
+                title={this.props.title}
+                show={this.props.show}
+                onSubmit={this.onConfirm.bind(this)}
+                onCancel={this.onCancel.bind(this)}
+                submitButtonType="danger"
+                submitButtonText="Confirm"
+            >
+                {this.props.message}
+            </Modal>
+        )
+    }
 }
 
-export default ConfirmationModal;
+export default ConfirmationModal
diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js
index 19337db8..ec6080f2 100644
--- a/frontend/src/components/modals/Modal.js
+++ b/frontend/src/components/modals/Modal.js
@@ -1,132 +1,132 @@
-import classNames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
-import jQuery from "../../util/jquery";
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import jQuery from '../../util/jquery'
 
 class Modal extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    submitButtonType: PropTypes.string,
-    submitButtonText: PropTypes.string
-  };
-  static defaultProps = {
-    submitButtonType: "primary",
-    submitButtonText: "Save"
-  };
-  static idCounter = 0;
+    static propTypes = {
+        title: PropTypes.string.isRequired,
+        show: PropTypes.bool.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired,
+        submitButtonType: PropTypes.string,
+        submitButtonText: PropTypes.string,
+    }
+    static defaultProps = {
+        submitButtonType: 'primary',
+        submitButtonText: 'Save',
+    }
+    static idCounter = 0
 
-  // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate
-  // 'close' triggers)
-  visible = false;
+    // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate
+    // 'close' triggers)
+    visible = false
 
-  constructor(props) {
-    super(props);
-    this.id = "modal-" + Modal.idCounter++;
-  }
+    constructor(props) {
+        super(props)
+        this.id = 'modal-' + Modal.idCounter++
+    }
 
-  componentDidMount() {
-    this.visible = this.props.show;
-    this.openOrCloseModal();
+    componentDidMount() {
+        this.visible = this.props.show
+        this.openOrCloseModal()
 
-    // Trigger auto-focus
-    jQuery("#" + this.id)
-      .on("shown.bs.modal", function() {
-        jQuery(this)
-          .find("input")
-          .first()
-          .focus();
-      })
-      .on("hide.bs.modal", () => {
-        if (this.visible) {
-          this.props.onCancel();
-        }
-      })
-      .on("keydown", e => {
-        e.stopPropagation();
-      });
-  }
+        // Trigger auto-focus
+        jQuery('#' + this.id)
+            .on('shown.bs.modal', function() {
+                jQuery(this)
+                    .find('input')
+                    .first()
+                    .focus()
+            })
+            .on('hide.bs.modal', () => {
+                if (this.visible) {
+                    this.props.onCancel()
+                }
+            })
+            .on('keydown', e => {
+                e.stopPropagation()
+            })
+    }
 
-  componentDidUpdate() {
-    this.visible = this.props.show;
-    this.openOrCloseModal();
-  }
+    componentDidUpdate() {
+        this.visible = this.props.show
+        this.openOrCloseModal()
+    }
 
-  onSubmit() {
-    if (this.visible) {
-      this.props.onSubmit();
-      this.visible = false;
-      this.closeModal();
+    onSubmit() {
+        if (this.visible) {
+            this.props.onSubmit()
+            this.visible = false
+            this.closeModal()
+        }
     }
-  }
 
-  onCancel() {
-    if (this.visible) {
-      this.props.onCancel();
-      this.visible = false;
-      this.closeModal();
+    onCancel() {
+        if (this.visible) {
+            this.props.onCancel()
+            this.visible = false
+            this.closeModal()
+        }
     }
-  }
 
-  openModal() {
-    jQuery("#" + this.id).modal("show");
-  }
+    openModal() {
+        jQuery('#' + this.id).modal('show')
+    }
 
-  closeModal() {
-    jQuery("#" + this.id).modal("hide");
-  }
+    closeModal() {
+        jQuery('#' + this.id).modal('hide')
+    }
 
-  openOrCloseModal() {
-    if (this.visible) {
-      this.openModal();
-    } else {
-      this.closeModal();
+    openOrCloseModal() {
+        if (this.visible) {
+            this.openModal()
+        } else {
+            this.closeModal()
+        }
     }
-  }
 
-  render() {
-    return (
-      <div className="modal fade" id={this.id} role="dialog">
-        <div className="modal-dialog" role="document">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title">{this.props.title}</h5>
-              <button
-                type="button"
-                className="close"
-                onClick={this.onCancel.bind(this)}
-                aria-label="Close"
-              >
-                <span>&times;</span>
-              </button>
+    render() {
+        return (
+            <div className="modal fade" id={this.id} role="dialog">
+                <div className="modal-dialog" role="document">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h5 className="modal-title">{this.props.title}</h5>
+                            <button
+                                type="button"
+                                className="close"
+                                onClick={this.onCancel.bind(this)}
+                                aria-label="Close"
+                            >
+                                <span>&times;</span>
+                            </button>
+                        </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)}
+                            >
+                                Close
+                            </button>
+                            <button
+                                type="button"
+                                className={classNames(
+                                    'btn',
+                                    'btn-' + this.props.submitButtonType,
+                                )}
+                                onClick={this.onSubmit.bind(this)}
+                            >
+                                {this.props.submitButtonText}
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </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)}
-              >
-                Close
-              </button>
-              <button
-                type="button"
-                className={classNames(
-                  "btn",
-                  "btn-" + this.props.submitButtonType
-                )}
-                onClick={this.onSubmit.bind(this)}
-              >
-                {this.props.submitButtonText}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
+        )
+    }
 }
 
-export default Modal;
+export default Modal
diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js
index cc16f8e1..8d03e81f 100644
--- a/frontend/src/components/modals/TextInputModal.js
+++ b/frontend/src/components/modals/TextInputModal.js
@@ -1,58 +1,58 @@
-import PropTypes from "prop-types";
-import React from "react";
-import Modal from "./Modal";
+import PropTypes from 'prop-types'
+import React from 'react'
+import Modal from './Modal'
 
 class TextInputModal extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
-    callback: PropTypes.func.isRequired,
-    initialValue: PropTypes.string
-  };
+    static propTypes = {
+        title: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        show: PropTypes.bool.isRequired,
+        callback: PropTypes.func.isRequired,
+        initialValue: PropTypes.string,
+    }
 
-  componentDidUpdate() {
-    if (this.props.initialValue) {
-      this.textInput.value = this.props.initialValue;
+    componentDidUpdate() {
+        if (this.props.initialValue) {
+            this.textInput.value = this.props.initialValue
+        }
     }
-  }
 
-  onSubmit() {
-    this.props.callback(this.textInput.value);
-    this.textInput.value = "";
-  }
+    onSubmit() {
+        this.props.callback(this.textInput.value)
+        this.textInput.value = ''
+    }
 
-  onCancel() {
-    this.props.callback(undefined);
-    this.textInput.value = "";
-  }
+    onCancel() {
+        this.props.callback(undefined)
+        this.textInput.value = ''
+    }
 
-  render() {
-    return (
-      <Modal
-        title={this.props.title}
-        show={this.props.show}
-        onSubmit={this.onSubmit.bind(this)}
-        onCancel={this.onCancel.bind(this)}
-      >
-        <form
-          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)}
-            />
-          </div>
-        </form>
-      </Modal>
-    );
-  }
+    render() {
+        return (
+            <Modal
+                title={this.props.title}
+                show={this.props.show}
+                onSubmit={this.onSubmit.bind(this)}
+                onCancel={this.onCancel.bind(this)}
+            >
+                <form
+                    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)}
+                        />
+                    </div>
+                </form>
+            </Modal>
+        )
+    }
 }
 
-export default TextInputModal;
+export default TextInputModal
diff --git a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js
index e356fe96..143109ff 100644
--- a/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js
+++ b/frontend/src/components/modals/custom-components/NewExperimentModalComponent.js
@@ -1,104 +1,104 @@
-import PropTypes from "prop-types";
-import React from "react";
-import Shapes from "../../../shapes";
-import Modal from "../Modal";
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../../shapes'
+import Modal from '../Modal'
 
 class NewExperimentModalComponent extends React.Component {
-  static propTypes = {
-    show: PropTypes.bool.isRequired,
-    paths: PropTypes.arrayOf(Shapes.Path),
-    schedulers: PropTypes.arrayOf(Shapes.Scheduler),
-    traces: PropTypes.arrayOf(Shapes.Trace),
-    callback: PropTypes.func.isRequired
-  };
+    static propTypes = {
+        show: PropTypes.bool.isRequired,
+        paths: PropTypes.arrayOf(Shapes.Path),
+        schedulers: PropTypes.arrayOf(Shapes.Scheduler),
+        traces: PropTypes.arrayOf(Shapes.Trace),
+        callback: PropTypes.func.isRequired,
+    }
 
-  reset() {
-    this.textInput.value = "";
-    this.pathSelect.selectedIndex = 0;
-    this.traceSelect.selectedIndex = 0;
-    this.schedulerSelect.selectedIndex = 0;
-  }
+    reset() {
+        this.textInput.value = ''
+        this.pathSelect.selectedIndex = 0
+        this.traceSelect.selectedIndex = 0
+        this.schedulerSelect.selectedIndex = 0
+    }
 
-  onSubmit() {
-    this.props.callback(
-      this.textInput.value,
-      parseInt(this.pathSelect.value, 10),
-      parseInt(this.traceSelect.value, 10),
-      this.schedulerSelect.value
-    );
-    this.reset();
-  }
+    onSubmit() {
+        this.props.callback(
+            this.textInput.value,
+            parseInt(this.pathSelect.value, 10),
+            parseInt(this.traceSelect.value, 10),
+            this.schedulerSelect.value,
+        )
+        this.reset()
+    }
 
-  onCancel() {
-    this.props.callback(undefined);
-    this.reset();
-  }
+    onCancel() {
+        this.props.callback(undefined)
+        this.reset()
+    }
 
-  render() {
-    return (
-      <Modal
-        title="New Experiment"
-        show={this.props.show}
-        onSubmit={this.onSubmit.bind(this)}
-        onCancel={this.onCancel.bind(this)}
-      >
-        <form
-          onSubmit={e => {
-            e.preventDefault();
-            this.onSubmit();
-          }}
-        >
-          <div className="form-group">
-            <label className="form-control-label">Name</label>
-            <input
-              type="text"
-              className="form-control"
-              ref={textInput => (this.textInput = textInput)}
-            />
-          </div>
-          <div className="form-group">
-            <label className="form-control-label">Path</label>
-            <select
-              className="form-control"
-              ref={pathSelect => (this.pathSelect = pathSelect)}
+    render() {
+        return (
+            <Modal
+                title="New Experiment"
+                show={this.props.show}
+                onSubmit={this.onSubmit.bind(this)}
+                onCancel={this.onCancel.bind(this)}
             >
-              {this.props.paths.map(path => (
-                <option value={path.id} key={path.id}>
-                  {path.name ? path.name : "Path " + path.id}
-                </option>
-              ))}
-            </select>
-          </div>
-          <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 => (
-                <option value={trace.id} key={trace.id}>
-                  {trace.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="form-group">
-            <label className="form-control-label">Scheduler</label>
-            <select
-              className="form-control"
-              ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)}
-            >
-              {this.props.schedulers.map(scheduler => (
-                <option value={scheduler.name} key={scheduler.name}>
-                  {scheduler.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </form>
-      </Modal>
-    );
-  }
+                <form
+                    onSubmit={e => {
+                        e.preventDefault()
+                        this.onSubmit()
+                    }}
+                >
+                    <div className="form-group">
+                        <label className="form-control-label">Name</label>
+                        <input
+                            type="text"
+                            className="form-control"
+                            ref={textInput => (this.textInput = textInput)}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <label className="form-control-label">Path</label>
+                        <select
+                            className="form-control"
+                            ref={pathSelect => (this.pathSelect = pathSelect)}
+                        >
+                            {this.props.paths.map(path => (
+                                <option value={path.id} key={path.id}>
+                                    {path.name ? path.name : 'Path ' + path.id}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <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 => (
+                                <option value={trace.id} key={trace.id}>
+                                    {trace.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className="form-group">
+                        <label className="form-control-label">Scheduler</label>
+                        <select
+                            className="form-control"
+                            ref={schedulerSelect => (this.schedulerSelect = schedulerSelect)}
+                        >
+                            {this.props.schedulers.map(scheduler => (
+                                <option value={scheduler.name} key={scheduler.name}>
+                                    {scheduler.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </form>
+            </Modal>
+        )
+    }
 }
 
-export default NewExperimentModalComponent;
+export default NewExperimentModalComponent
diff --git a/frontend/src/components/navigation/AppNavbar.js b/frontend/src/components/navigation/AppNavbar.js
index 1a35f85d..451bb6a3 100644
--- a/frontend/src/components/navigation/AppNavbar.js
+++ b/frontend/src/components/navigation/AppNavbar.js
@@ -1,56 +1,56 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
-import Navbar, { NavItem } from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+import { Link } from 'react-router-dom'
+import Navbar, { NavItem } from './Navbar'
+import './Navbar.css'
 
 const AppNavbar = ({ simulationId, inSimulation, fullWidth }) => (
-  <Navbar fullWidth={fullWidth}>
-    {inSimulation ? (
-      <NavItem route={"/simulations/" + simulationId}>
-        <Link
-          className="nav-link"
-          title="Construction"
-          to={"/simulations/" + simulationId}
-        >
-          <FontAwesome name="industry" className="mr-2" />
-          Construction
-        </Link>
-      </NavItem>
-    ) : (
-      undefined
-    )}
-    {inSimulation ? (
-      <NavItem route={"/simulations/" + simulationId + "/experiments"}>
-        <Link
-          className="nav-link"
-          title="Experiments"
-          to={"/simulations/" + simulationId + "/experiments"}
-        >
-          <FontAwesome name="play" className="mr-2" />
-          Experiments
-        </Link>
-      </NavItem>
-    ) : (
-      undefined
-    )}
-    <NavItem route="/simulations">
-      <Link className="nav-link" title="My Simulations" to="/simulations">
-        <FontAwesome name="list" className="mr-2" />
-        My Simulations
-      </Link>
-    </NavItem>
-    <NavItem route="email">
-      <a
-        className="nav-link"
-        title="Support"
-        href="mailto:opendc@atlarge-research.com"
-      >
-        <FontAwesome name="envelope" className="mr-2" />
-        Support
-      </a>
-    </NavItem>
-  </Navbar>
-);
+    <Navbar fullWidth={fullWidth}>
+        {inSimulation ? (
+            <NavItem route={'/simulations/' + simulationId}>
+                <Link
+                    className="nav-link"
+                    title="Construction"
+                    to={'/simulations/' + simulationId}
+                >
+                    <FontAwesome name="industry" className="mr-2"/>
+                    Construction
+                </Link>
+            </NavItem>
+        ) : (
+            undefined
+        )}
+        {inSimulation ? (
+            <NavItem route={'/simulations/' + simulationId + '/experiments'}>
+                <Link
+                    className="nav-link"
+                    title="Experiments"
+                    to={'/simulations/' + simulationId + '/experiments'}
+                >
+                    <FontAwesome name="play" className="mr-2"/>
+                    Experiments
+                </Link>
+            </NavItem>
+        ) : (
+            undefined
+        )}
+        <NavItem route="/simulations">
+            <Link className="nav-link" title="My Simulations" to="/simulations">
+                <FontAwesome name="list" className="mr-2"/>
+                My Simulations
+            </Link>
+        </NavItem>
+        <NavItem route="email">
+            <a
+                className="nav-link"
+                title="Support"
+                href="mailto:opendc@atlarge-research.com"
+            >
+                <FontAwesome name="envelope" className="mr-2"/>
+                Support
+            </a>
+        </NavItem>
+    </Navbar>
+)
 
-export default AppNavbar;
+export default AppNavbar
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 5d08bf3c..5bb6721d 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,24 +1,24 @@
-import React from "react";
-import Navbar from "./Navbar";
-import "./Navbar.css";
+import React from 'react'
+import Navbar from './Navbar'
+import './Navbar.css'
 
 const ScrollNavItem = ({ id, name }) => (
-  <li className="nav-item">
-    <a className="nav-link" href={id}>
-      {name}
-    </a>
-  </li>
-);
+    <li className="nav-item">
+        <a className="nav-link" href={id}>
+            {name}
+        </a>
+    </li>
+)
 
 const HomeNavbar = () => (
-  <Navbar fullWidth={false}>
-    <ScrollNavItem id="#stakeholders" name="Stakeholders" />
-    <ScrollNavItem id="#modeling" name="Modeling" />
-    <ScrollNavItem id="#simulation" name="Simulation" />
-    <ScrollNavItem id="#technologies" name="Technologies" />
-    <ScrollNavItem id="#team" name="Team" />
-    <ScrollNavItem id="#contact" name="Contact" />
-  </Navbar>
-);
+    <Navbar fullWidth={false}>
+        <ScrollNavItem id="#stakeholders" name="Stakeholders"/>
+        <ScrollNavItem id="#modeling" name="Modeling"/>
+        <ScrollNavItem id="#simulation" name="Simulation"/>
+        <ScrollNavItem id="#technologies" name="Technologies"/>
+        <ScrollNavItem id="#team" name="Team"/>
+        <ScrollNavItem id="#contact" name="Contact"/>
+    </Navbar>
+)
 
-export default HomeNavbar;
+export default HomeNavbar
diff --git a/frontend/src/components/navigation/LogoutButton.js b/frontend/src/components/navigation/LogoutButton.js
index 800a3da8..905e1ae9 100644
--- a/frontend/src/components/navigation/LogoutButton.js
+++ b/frontend/src/components/navigation/LogoutButton.js
@@ -1,16 +1,16 @@
-import PropTypes from "prop-types";
-import React from "react";
-import FontAwesome from "react-fontawesome";
-import { Link } from "react-router-dom";
+import PropTypes from 'prop-types'
+import React from 'react'
+import FontAwesome from 'react-fontawesome'
+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" />
-  </Link>
-);
+    <Link className="logout nav-link" title="Sign out" to="#" onClick={onLogout}>
+        <FontAwesome name="power-off" size="lg"/>
+    </Link>
+)
 
 LogoutButton.propTypes = {
-  onLogout: PropTypes.func.isRequired
-};
+    onLogout: PropTypes.func.isRequired,
+}
 
-export default LogoutButton;
+export default LogoutButton
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index 44458949..d22f637e 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -1,102 +1,102 @@
-import classNames from "classnames";
-import React from "react";
-import { Link, withRouter } from "react-router-dom";
-import { userIsLoggedIn } from "../../auth/index";
-import Login from "../../containers/auth/Login";
-import Logout from "../../containers/auth/Logout";
-import ProfileName from "../../containers/auth/ProfileName";
-import "./Navbar.css";
+import classNames from 'classnames'
+import React from 'react'
+import { Link, withRouter } from 'react-router-dom'
+import { userIsLoggedIn } from '../../auth/index'
+import Login from '../../containers/auth/Login'
+import Logout from '../../containers/auth/Logout'
+import ProfileName from '../../containers/auth/ProfileName'
+import './Navbar.css'
 
-export const NAVBAR_HEIGHT = 60;
+export const NAVBAR_HEIGHT = 60
 
-export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />);
+export const NavItem = withRouter(props => <NavItemWithoutRoute {...props} />)
 export const LoggedInSection = withRouter(props => (
-  <LoggedInSectionWithoutRoute {...props} />
-));
+    <LoggedInSectionWithoutRoute {...props} />
+))
 
 const GitHubLink = () => (
-  <a
-    href="https://github.com/atlarge-research/opendc"
-    className="ml-2 mr-3 text-dark"
-    style={{ position: "relative", top: 7 }}
-  >
-    <span className="fa fa-github fa-2x" />
-  </a>
-);
+    <a
+        href="https://github.com/atlarge-research/opendc"
+        className="ml-2 mr-3 text-dark"
+        style={{ position: 'relative', top: 7 }}
+    >
+        <span className="fa fa-github fa-2x"/>
+    </a>
+)
 
 const NavItemWithoutRoute = ({ route, location, children }) => (
-  <li
-    className={classNames(
-      "nav-item",
-      location.pathname === route ? "active" : undefined
-    )}
-  >
-    {children}
-  </li>
-);
+    <li
+        className={classNames(
+            'nav-item',
+            location.pathname === route ? 'active' : undefined,
+        )}
+    >
+        {children}
+    </li>
+)
 
 const LoggedInSectionWithoutRoute = ({ location }) => (
-  <ul className="navbar-nav auth-links">
-    {userIsLoggedIn() ? (
-      [
-        location.pathname === "/" ? (
-          <NavItem route="/simulations" key="simulations">
-            <Link className="nav-link" title="My Simulations" to="/simulations">
-              My Simulations
-            </Link>
-          </NavItem>
+    <ul className="navbar-nav auth-links">
+        {userIsLoggedIn() ? (
+            [
+                location.pathname === '/' ? (
+                    <NavItem route="/simulations" key="simulations">
+                        <Link className="nav-link" title="My Simulations" to="/simulations">
+                            My Simulations
+                        </Link>
+                    </NavItem>
+                ) : (
+                    <NavItem route="/profile" key="profile">
+                        <Link className="nav-link" title="My Profile" to="/profile">
+                            <ProfileName/>
+                        </Link>
+                    </NavItem>
+                ),
+                <NavItem route="logout" key="logout">
+                    <Logout/>
+                </NavItem>,
+            ]
         ) : (
-          <NavItem route="/profile" key="profile">
-            <Link className="nav-link" title="My Profile" to="/profile">
-              <ProfileName />
-            </Link>
-          </NavItem>
-        ),
-        <NavItem route="logout" key="logout">
-          <Logout />
-        </NavItem>
-      ]
-    ) : (
-      <NavItem route="login">
-        <GitHubLink />
-        <Login visible={true} />
-      </NavItem>
-    )}
-  </ul>
-);
+            <NavItem route="login">
+                <GitHubLink/>
+                <Login visible={true}/>
+            </NavItem>
+        )}
+    </ul>
+)
 
 const Navbar = ({ fullWidth, children }) => (
-  <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"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <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>
+    <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"
+                type="button"
+                data-toggle="collapse"
+                data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
+            >
+                <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>
 
-      <div className="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul className="navbar-nav mr-auto">{children}</ul>
-        <LoggedInSection />
-      </div>
-    </div>
-  </nav>
-);
+            <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul className="navbar-nav mr-auto">{children}</ul>
+                <LoggedInSection/>
+            </div>
+        </div>
+    </nav>
+)
 
-export default Navbar;
+export default Navbar
diff --git a/frontend/src/components/navigation/Navbar.sass b/frontend/src/components/navigation/Navbar.sass
index 94c52936..a270bc6b 100644
--- a/frontend/src/components/navigation/Navbar.sass
+++ b/frontend/src/components/navigation/Navbar.sass
@@ -2,28 +2,28 @@
 @import ../../style-globals/_variables.sass
 
 .navbar
-  border-top: $blue 3px solid
-  border-bottom: $gray-semi-dark 1px solid
-  color: $gray-very-dark
-  background: #fafafb
+    border-top: $blue 3px solid
+    border-bottom: $gray-semi-dark 1px solid
+    color: $gray-very-dark
+    background: #fafafb
 
 .opendc-brand
-  display: inline-block
-  color: $gray-very-dark
+    display: inline-block
+    color: $gray-very-dark
 
-  +transition(background, $transition-length)
+    +transition(background, $transition-length)
 
-  img
-    position: relative
-    bottom: 3px
-    display: inline-block
-    width: 30px
+    img
+        position: relative
+        bottom: 3px
+        display: inline-block
+        width: 30px
 
 .login
-  height: 40px
-  background: $blue
-  border: none
-  +clickable
+    height: 40px
+    background: $blue
+    border: none
+    +clickable
 
-  &:hover
-    background: $blue-dark
+    &:hover
+        background: $blue-dark
diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js
index eea89e7b..bc2d2366 100644
--- a/frontend/src/components/not-found/BlinkingCursor.js
+++ b/frontend/src/components/not-found/BlinkingCursor.js
@@ -1,6 +1,6 @@
-import React from "react";
-import "./BlinkingCursor.css";
+import React from 'react'
+import './BlinkingCursor.css'
 
-const BlinkingCursor = () => <span className="blinking-cursor">_</span>;
+const BlinkingCursor = () => <span className="blinking-cursor">_</span>
 
-export default BlinkingCursor;
+export default BlinkingCursor
diff --git a/frontend/src/components/not-found/BlinkingCursor.sass b/frontend/src/components/not-found/BlinkingCursor.sass
index 6be1476d..ad91df85 100644
--- a/frontend/src/components/not-found/BlinkingCursor.sass
+++ b/frontend/src/components/not-found/BlinkingCursor.sass
@@ -1,35 +1,35 @@
 .blinking-cursor
-  -webkit-animation: 1s blink step-end infinite
-  -moz-animation: 1s blink step-end infinite
-  -o-animation: 1s blink step-end infinite
-  animation: 1s blink step-end infinite
+    -webkit-animation: 1s blink step-end infinite
+    -moz-animation: 1s blink step-end infinite
+    -o-animation: 1s blink step-end infinite
+    animation: 1s blink step-end infinite
 
 @keyframes blink
-  from, to
-    color: #eeeeee
-  50%
-    color: #333333
+    from, to
+        color: #eeeeee
+    50%
+        color: #333333
 
 @-moz-keyframes blink
-  from, to
-    color: #eeeeee
-  50%
-    color: #333333
+    from, to
+        color: #eeeeee
+    50%
+        color: #333333
 
 @-webkit-keyframes blink
-  from, to
-    color: #eeeeee
-  50%
-    color: #333333
+    from, to
+        color: #eeeeee
+    50%
+        color: #333333
 
 @-ms-keyframes blink
-  from, to
-    color: #eeeeee
-  50%
-    color: #333333
+    from, to
+        color: #eeeeee
+    50%
+        color: #333333
 
 @-o-keyframes blink
-  from, to
-    color: #eeeeee
-  50%
-    color: #333333
+    from, to
+        color: #eeeeee
+    50%
+        color: #333333
diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js
index 46dc4402..9e9cd29c 100644
--- a/frontend/src/components/not-found/CodeBlock.js
+++ b/frontend/src/components/not-found/CodeBlock.js
@@ -1,34 +1,34 @@
-import React from "react";
-import "./CodeBlock.css";
+import React from 'react'
+import './CodeBlock.css'
 
 const CodeBlock = () => {
-  const textBlock =
-    "    oo      oooo       oo   <br/>" +
-    "   oo      oo  oo     oo    <br/>" +
-    "  oo       oo  oo    oo     <br/>" +
-    " oooooo    oo  oo   oooooo  <br/>" +
-    "     oo    oo  oo       oo  <br/>" +
-    "     oo     oooo        oo  <br/>";
-  const charList = textBlock.split("");
+    const textBlock =
+        '    oo      oooo       oo   <br/>' +
+        '   oo      oo  oo     oo    <br/>' +
+        '  oo       oo  oo    oo     <br/>' +
+        ' oooooo    oo  oo   oooooo  <br/>' +
+        '     oo    oo  oo       oo  <br/>' +
+        '     oo     oooo        oo  <br/>'
+    const charList = textBlock.split('')
 
-  // Binary representation of the string "OpenDC!" ;)
-  const binaryString =
-    "01001111011100000110010101101110010001000100001100100001";
+    // Binary representation of the string "OpenDC!" ;)
+    const binaryString =
+        '01001111011100000110010101101110010001000100001100100001'
 
-  let binaryIndex = 0;
-  for (let i = 0; i < charList.length; i++) {
-    if (charList[i] === "o") {
-      charList[i] = binaryString[binaryIndex];
-      binaryIndex++;
+    let binaryIndex = 0
+    for (let i = 0; i < charList.length; i++) {
+        if (charList[i] === 'o') {
+            charList[i] = binaryString[binaryIndex]
+            binaryIndex++
+        }
     }
-  }
 
-  return (
-    <div
-      className="code-block"
-      dangerouslySetInnerHTML={{ __html: textBlock }}
-    />
-  );
-};
+    return (
+        <div
+            className="code-block"
+            dangerouslySetInnerHTML={{ __html: textBlock }}
+        />
+    )
+}
 
-export default CodeBlock;
+export default CodeBlock
diff --git a/frontend/src/components/not-found/CodeBlock.sass b/frontend/src/components/not-found/CodeBlock.sass
index 51a3d3d0..e452f917 100644
--- a/frontend/src/components/not-found/CodeBlock.sass
+++ b/frontend/src/components/not-found/CodeBlock.sass
@@ -1,3 +1,3 @@
 .code-block
-  white-space: pre-wrap
-  margin-top: 60px
+    white-space: pre-wrap
+    margin-top: 60px
diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js
index c6b8b78b..b629d14c 100644
--- a/frontend/src/components/not-found/TerminalWindow.js
+++ b/frontend/src/components/not-found/TerminalWindow.js
@@ -1,29 +1,29 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import BlinkingCursor from "./BlinkingCursor";
-import CodeBlock from "./CodeBlock";
-import "./TerminalWindow.css";
+import React from 'react'
+import { Link } from 'react-router-dom'
+import BlinkingCursor from './BlinkingCursor'
+import CodeBlock from './CodeBlock'
+import './TerminalWindow.css'
 
 const TerminalWindow = () => (
-  <div className="terminal-window">
-    <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 />
-      </div>
-      <CodeBlock />
-      <div className="sub-title">
-        Got lost?<BlinkingCursor />
-      </div>
-      <Link to="/" className="home-btn">
-        <span className="fa fa-home" /> GET ME BACK TO OPENDC
-      </Link>
+    <div className="terminal-window">
+        <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/>
+            </div>
+            <CodeBlock/>
+            <div className="sub-title">
+                Got lost?<BlinkingCursor/>
+            </div>
+            <Link to="/" className="home-btn">
+                <span className="fa fa-home"/> GET ME BACK TO OPENDC
+            </Link>
+        </div>
     </div>
-  </div>
-);
+)
 
-export default TerminalWindow;
+export default TerminalWindow
diff --git a/frontend/src/components/not-found/TerminalWindow.sass b/frontend/src/components/not-found/TerminalWindow.sass
index 4f51a77f..7f05335a 100644
--- a/frontend/src/components/not-found/TerminalWindow.sass
+++ b/frontend/src/components/not-found/TerminalWindow.sass
@@ -1,70 +1,70 @@
 .terminal-window
-  width: 600px
-  height: 400px
-  display: block
+    width: 600px
+    height: 400px
+    display: block
 
-  position: absolute
-  top: 0
-  bottom: 0
-  left: 0
-  right: 0
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
 
-  margin: auto
+    margin: auto
 
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-  cursor: default
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+    cursor: default
 
-  overflow: hidden
+    overflow: hidden
 
-  box-shadow: 5px 5px 20px #444444
+    box-shadow: 5px 5px 20px #444444
 
 .terminal-header
-  font-family: monospace
-  background: #cccccc
-  color: #444444
-  height: 30px
-  line-height: 30px
-  padding-left: 10px
+    font-family: monospace
+    background: #cccccc
+    color: #444444
+    height: 30px
+    line-height: 30px
+    padding-left: 10px
 
-  border-top-left-radius: 7px
-  border-top-right-radius: 7px
+    border-top-left-radius: 7px
+    border-top-right-radius: 7px
 
 .terminal-body
-  font-family: monospace
-  text-align: center
-  background-color: #333333
-  color: #eeeeee
-  padding: 10px
+    font-family: monospace
+    text-align: center
+    background-color: #333333
+    color: #eeeeee
+    padding: 10px
 
-  height: 100%
+    height: 100%
 
 .segfault
-  text-align: left
+    text-align: left
 
 .sub-title
-  margin-top: 20px
+    margin-top: 20px
 
 .home-btn
-  margin-top: 10px
-  padding: 5px
-  display: inline-block
-  border: 1px solid #eeeeee
-  color: #eeeeee
-  text-decoration: none
-  cursor: pointer
+    margin-top: 10px
+    padding: 5px
+    display: inline-block
+    border: 1px solid #eeeeee
+    color: #eeeeee
+    text-decoration: none
+    cursor: pointer
 
-  -webkit-transition: all 200ms
-  -moz-transition: all 200ms
-  -o-transition: all 200ms
-  transition: all 200ms
+    -webkit-transition: all 200ms
+    -moz-transition: all 200ms
+    -o-transition: all 200ms
+    transition: all 200ms
 
 .home-btn:hover
-  background: #eeeeee
-  color: #333333
+    background: #eeeeee
+    color: #333333
 
 .home-btn:active
-  background: #333333
-  color: #eeeeee
+    background: #333333
+    color: #eeeeee
diff --git a/frontend/src/components/simulations/FilterButton.js b/frontend/src/components/simulations/FilterButton.js
index aa41f180..664f9b46 100644
--- a/frontend/src/components/simulations/FilterButton.js
+++ b/frontend/src/components/simulations/FilterButton.js
@@ -1,24 +1,24 @@
-import classNames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const FilterButton = ({ active, children, onClick }) => (
-  <button
-    className={classNames("btn btn-secondary", { active: active })}
-    onClick={() => {
-      if (!active) {
-        onClick();
-      }
-    }}
-  >
-    {children}
-  </button>
-);
+    <button
+        className={classNames('btn btn-secondary', { active: active })}
+        onClick={() => {
+            if (!active) {
+                onClick()
+            }
+        }}
+    >
+        {children}
+    </button>
+)
 
 FilterButton.propTypes = {
-  active: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func.isRequired
-};
+    active: PropTypes.bool.isRequired,
+    children: PropTypes.node.isRequired,
+    onClick: PropTypes.func.isRequired,
+}
 
-export default FilterButton;
+export default FilterButton
diff --git a/frontend/src/components/simulations/FilterPanel.js b/frontend/src/components/simulations/FilterPanel.js
index 836c0842..cbc3bf6a 100644
--- a/frontend/src/components/simulations/FilterPanel.js
+++ b/frontend/src/components/simulations/FilterPanel.js
@@ -1,13 +1,13 @@
-import React from "react";
-import FilterLink from "../../containers/simulations/FilterLink";
-import "./FilterPanel.css";
+import React from 'react'
+import FilterLink from '../../containers/simulations/FilterLink'
+import './FilterPanel.css'
 
 const FilterPanel = () => (
-  <div className="btn-group filter-panel mb-2">
-    <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
-    <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
-    <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-  </div>
-);
+    <div className="btn-group filter-panel mb-2">
+        <FilterLink filter="SHOW_ALL">All Simulations</FilterLink>
+        <FilterLink filter="SHOW_OWN">My Simulations</FilterLink>
+        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
+    </div>
+)
 
-export default FilterPanel;
+export default FilterPanel
diff --git a/frontend/src/components/simulations/FilterPanel.sass b/frontend/src/components/simulations/FilterPanel.sass
index e10e4746..f71cf6c8 100644
--- a/frontend/src/components/simulations/FilterPanel.sass
+++ b/frontend/src/components/simulations/FilterPanel.sass
@@ -1,5 +1,5 @@
 .filter-panel
-  display: flex
+    display: flex
 
-  button
-    flex: 1 !important
+    button
+        flex: 1 !important
diff --git a/frontend/src/components/simulations/NewSimulationButtonComponent.js b/frontend/src/components/simulations/NewSimulationButtonComponent.js
index 7e12d30f..d07a6419 100644
--- a/frontend/src/components/simulations/NewSimulationButtonComponent.js
+++ b/frontend/src/components/simulations/NewSimulationButtonComponent.js
@@ -1,17 +1,17 @@
-import PropTypes from "prop-types";
-import React from "react";
+import PropTypes from 'prop-types'
+import React from 'react'
 
 const NewSimulationButtonComponent = ({ onClick }) => (
-  <div className="bottom-btn-container">
-    <div className="btn btn-primary float-right" onClick={onClick}>
-      <span className="fa fa-plus mr-2" />
-      New Simulation
+    <div className="bottom-btn-container">
+        <div className="btn btn-primary float-right" onClick={onClick}>
+            <span className="fa fa-plus mr-2"/>
+            New Simulation
+        </div>
     </div>
-  </div>
-);
+)
 
 NewSimulationButtonComponent.propTypes = {
-  onClick: PropTypes.func.isRequired
-};
+    onClick: PropTypes.func.isRequired,
+}
 
-export default NewSimulationButtonComponent;
+export default NewSimulationButtonComponent
diff --git a/frontend/src/components/simulations/SimulationActionButtons.js b/frontend/src/components/simulations/SimulationActionButtons.js
index 46f4f159..6d2e5831 100644
--- a/frontend/src/components/simulations/SimulationActionButtons.js
+++ b/frontend/src/components/simulations/SimulationActionButtons.js
@@ -1,37 +1,37 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Link } from "react-router-dom";
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Link } from 'react-router-dom'
 
 const SimulationActionButtons = ({ simulationId, onViewUsers, onDelete }) => (
-  <td className="text-right">
-    <Link
-      to={"/simulations/" + simulationId}
-      className="btn btn-outline-primary btn-sm mr-2"
-      title="Open this simulation"
-    >
-      <span className="fa fa-play" />
-    </Link>
-    <div
-      className="btn btn-outline-success btn-sm disabled mr-2"
-      title="View and edit collaborators (not supported yet)"
-      onClick={() => onViewUsers(simulationId)}
-    >
-      <span className="fa fa-users" />
-    </div>
-    <div
-      className="btn btn-outline-danger btn-sm"
-      title="Delete this simulation"
-      onClick={() => onDelete(simulationId)}
-    >
-      <span className="fa fa-trash" />
-    </div>
-  </td>
-);
+    <td className="text-right">
+        <Link
+            to={'/simulations/' + simulationId}
+            className="btn btn-outline-primary btn-sm mr-2"
+            title="Open this simulation"
+        >
+            <span className="fa fa-play"/>
+        </Link>
+        <div
+            className="btn btn-outline-success btn-sm disabled mr-2"
+            title="View and edit collaborators (not supported yet)"
+            onClick={() => onViewUsers(simulationId)}
+        >
+            <span className="fa fa-users"/>
+        </div>
+        <div
+            className="btn btn-outline-danger btn-sm"
+            title="Delete this simulation"
+            onClick={() => onDelete(simulationId)}
+        >
+            <span className="fa fa-trash"/>
+        </div>
+    </td>
+)
 
 SimulationActionButtons.propTypes = {
-  simulationId: PropTypes.number.isRequired,
-  onViewUsers: PropTypes.func,
-  onDelete: PropTypes.func
-};
+    simulationId: PropTypes.number.isRequired,
+    onViewUsers: PropTypes.func,
+    onDelete: PropTypes.func,
+}
 
-export default SimulationActionButtons;
+export default SimulationActionButtons
diff --git a/frontend/src/components/simulations/SimulationAuthList.js b/frontend/src/components/simulations/SimulationAuthList.js
index f29dc96d..dce7fb5c 100644
--- a/frontend/src/components/simulations/SimulationAuthList.js
+++ b/frontend/src/components/simulations/SimulationAuthList.js
@@ -1,43 +1,43 @@
-import PropTypes from "prop-types";
-import React from "react";
-import Shapes from "../../shapes/index";
-import SimulationAuthRow from "./SimulationAuthRow";
+import PropTypes from 'prop-types'
+import React from 'react'
+import Shapes from '../../shapes/index'
+import SimulationAuthRow from './SimulationAuthRow'
 
 const SimulationAuthList = ({ authorizations }) => {
-  return (
-    <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 simulations here yet...</strong> Add some with the 'New
-          Simulation' button!
+    return (
+        <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 simulations here yet...</strong> Add some with the 'New
+                    Simulation' button!
+                </div>
+            ) : (
+                <table className="table table-striped">
+                    <thead>
+                    <tr>
+                        <th>Simulation name</th>
+                        <th>Last edited</th>
+                        <th>Access rights</th>
+                        <th/>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {authorizations.map(authorization => (
+                        <SimulationAuthRow
+                            simulationAuth={authorization}
+                            key={authorization.simulation.id}
+                        />
+                    ))}
+                    </tbody>
+                </table>
+            )}
         </div>
-      ) : (
-        <table className="table table-striped">
-          <thead>
-            <tr>
-              <th>Simulation name</th>
-              <th>Last edited</th>
-              <th>Access rights</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {authorizations.map(authorization => (
-              <SimulationAuthRow
-                simulationAuth={authorization}
-                key={authorization.simulation.id}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-};
+    )
+}
 
 SimulationAuthList.propTypes = {
-  authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired
-};
+    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+}
 
-export default SimulationAuthList;
+export default SimulationAuthList
diff --git a/frontend/src/components/simulations/SimulationAuthRow.js b/frontend/src/components/simulations/SimulationAuthRow.js
index b638fbce..b647db69 100644
--- a/frontend/src/components/simulations/SimulationAuthRow.js
+++ b/frontend/src/components/simulations/SimulationAuthRow.js
@@ -1,32 +1,32 @@
-import classNames from "classnames";
-import React from "react";
-import SimulationActions from "../../containers/simulations/SimulationActions";
-import Shapes from "../../shapes/index";
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from "../../util/authorizations";
-import { parseAndFormatDateTime } from "../../util/date-time";
+import classNames from 'classnames'
+import React from 'react'
+import SimulationActions from '../../containers/simulations/SimulationActions'
+import Shapes from '../../shapes/index'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { parseAndFormatDateTime } from '../../util/date-time'
 
 const SimulationAuthRow = ({ simulationAuth }) => (
-  <tr>
-    <td className="pt-3">{simulationAuth.simulation.name}</td>
-    <td className="pt-3">
-      {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}
-    </td>
-    <td className="pt-3">
+    <tr>
+        <td className="pt-3">{simulationAuth.simulation.name}</td>
+        <td className="pt-3">
+            {parseAndFormatDateTime(simulationAuth.simulation.datetimeLastEdited)}
+        </td>
+        <td className="pt-3">
       <span
-        className={classNames(
-          "fa",
-          "fa-" + AUTH_ICON_MAP[simulationAuth.authorizationLevel],
-          "mr-2"
-        )}
+          className={classNames(
+              'fa',
+              'fa-' + AUTH_ICON_MAP[simulationAuth.authorizationLevel],
+              'mr-2',
+          )}
       />
-      {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
-    </td>
-    <SimulationActions simulationId={simulationAuth.simulation.id} />
-  </tr>
-);
+            {AUTH_DESCRIPTION_MAP[simulationAuth.authorizationLevel]}
+        </td>
+        <SimulationActions simulationId={simulationAuth.simulation.id}/>
+    </tr>
+)
 
 SimulationAuthRow.propTypes = {
-  simulationAuth: Shapes.Authorization.isRequired
-};
+    simulationAuth: Shapes.Authorization.isRequired,
+}
 
-export default SimulationAuthRow;
+export default SimulationAuthRow
author	Georgios Andreadis <info@gandreadis.com>	2020-07-01 13:33:31 +0200
committer	Fabian Mastenbroek <mail.fabianm@gmail.com>	2020-08-24 19:47:17 +0200
commit	de8f12d74faef5fa3f9e38d1340948cab2d06ea3 (patch)
tree	678bf1af3e5fa2334f0df43388d45294785bbf1e /frontend/src/components
parent	44236756c4cf689806dc17c6950a2cff3e9227bf (diff)