6 files changed, 200 insertions, 208 deletions
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