From 912e1b96bfa7d6c022d854fa744f719b49ca98d0 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Tue, 21 Jul 2020 15:33:37 +0200
Subject: Add first plotting attempts for portfolios

---
 frontend/src/components/app/map/LoadingScreen.js   |  2 +-
 frontend/src/components/app/map/MapConstants.js    |  3 +-
 .../src/components/app/map/MapStageComponent.js    | 36 +++++-----------------
 .../app/map/controls/ExportCanvasComponent.js      |  2 +-
 .../app/map/controls/ScaleIndicatorComponent.js    |  5 +--
 .../app/map/controls/ToolPanelComponent.js         |  4 +--
 .../app/map/controls/ZoomControlComponent.js       | 30 +++++++++---------
 .../src/components/app/map/elements/Backdrop.js    | 10 +-----
 .../src/components/app/map/elements/RackFillBar.js | 35 +++++----------------
 .../components/app/map/elements/TilePlusIcon.js    |  8 ++---
 .../src/components/app/map/elements/WallSegment.js |  9 +-----
 .../src/components/app/map/groups/GridGroup.js     |  8 ++---
 .../src/components/app/map/groups/RackGroup.js     | 18 ++---------
 .../src/components/app/map/groups/RoomGroup.js     | 30 +++++++-----------
 .../src/components/app/map/groups/TileGroup.js     |  4 +--
 .../src/components/app/map/groups/TopologyGroup.js | 20 +++++++-----
 .../src/components/app/map/groups/WallGroup.js     |  2 +-
 .../app/map/layers/HoverLayerComponent.js          | 34 ++++++++------------
 .../components/app/map/layers/MapLayerComponent.js | 13 +++-----
 .../app/map/layers/ObjectHoverLayerComponent.js    |  2 +-
 .../app/map/layers/RoomHoverLayerComponent.js      |  2 +-
 21 files changed, 90 insertions(+), 187 deletions(-)

(limited to 'frontend/src/components/app/map')

diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js
index 03daa692..7efea9b0 100644
--- a/frontend/src/components/app/map/LoadingScreen.js
+++ b/frontend/src/components/app/map/LoadingScreen.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
 
 const LoadingScreen = () => (
     <div className="display-4">
-        <FontAwesome name="refresh" className="mr-4" spin/>
+        <FontAwesome name="refresh" className="mr-4" spin />
         Loading your project...
     </div>
 )
diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js
index 286920e2..0a970701 100644
--- a/frontend/src/components/app/map/MapConstants.js
+++ b/frontend/src/components/app/map/MapConstants.js
@@ -5,8 +5,7 @@ export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
 
 export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
 export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
-export const OBJECT_SIZE_IN_PIXELS =
-    TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
 
 export const GRID_LINE_WIDTH_IN_PIXELS = 2
 export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8
diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index f1c2b211..cecb34de 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -43,19 +43,12 @@ class MapStageComponent extends React.Component {
     }
 
     updateDimensions() {
-        this.props.setMapDimensions(
-            jQuery(window).width(),
-            jQuery(window).height() - NAVBAR_HEIGHT,
-        )
+        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT)
     }
 
     updateScale(e) {
         e.preventDefault()
-        this.props.zoomInOnPosition(
-            e.deltaY < 0,
-            this.state.mouseX,
-            this.state.mouseY,
-        )
+        this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
     }
 
     updateMousePosition() {
@@ -83,21 +76,14 @@ class MapStageComponent extends React.Component {
     }
 
     moveWithDelta(deltaX, deltaY) {
-        this.props.setMapPositionWithBoundsCheck(
-            this.props.mapPosition.x + deltaX,
-            this.props.mapPosition.y + deltaY,
-        )
+        this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY)
     }
 
     render() {
         return (
-            <Shortcuts
-                name="MAP"
-                handler={this.handleShortcuts.bind(this)}
-                targetNodeSelector="body"
-            >
+            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
                 <Stage
-                    ref={stage => {
+                    ref={(stage) => {
                         this.stage = stage
                     }}
                     width={this.props.mapDimensions.width}
@@ -105,15 +91,9 @@ class MapStageComponent extends React.Component {
                     onMouseMove={this.updateMousePosition.bind(this)}
                 >
                     <Provider store={store}>
-                        <MapLayer/>
-                        <RoomHoverLayer
-                            mouseX={this.state.mouseX}
-                            mouseY={this.state.mouseY}
-                        />
-                        <ObjectHoverLayer
-                            mouseX={this.state.mouseX}
-                            mouseY={this.state.mouseY}
-                        />
+                        <MapLayer />
+                        <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
+                        <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
                     </Provider>
                 </Stage>
             </Shortcuts>
diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
index d166bcc8..8487f47b 100644
--- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
@@ -6,7 +6,7 @@ const ExportCanvasComponent = () => (
         title="Export Canvas to PNG Image"
         onClick={() => window['exportCanvasToImage']()}
     >
-        <span className="fa fa-camera"/>
+        <span className="fa fa-camera" />
     </button>
 )
 
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index daaf8ec6..54709482 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -3,10 +3,7 @@ import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 import './ScaleIndicatorComponent.css'
 
 const ScaleIndicatorComponent = ({ scale }) => (
-    <div
-        className="scale-indicator"
-        style={{ width: TILE_SIZE_IN_PIXELS * scale }}
-    >
+    <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
         {TILE_SIZE_IN_METERS}m
     </div>
 )
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e3bb1dbb..e0e4d554 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -5,8 +5,8 @@ import './ToolPanelComponent.css'
 
 const ToolPanelComponent = () => (
     <div className="tool-panel">
-        <ZoomControlContainer/>
-        <ExportCanvasComponent/>
+        <ZoomControlContainer />
+        <ExportCanvasComponent />
     </div>
 )
 
diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js
index bd6527a6..65944bea 100644
--- a/frontend/src/components/app/map/controls/ZoomControlComponent.js
+++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js
@@ -3,21 +3,21 @@ import React from 'react'
 const ZoomControlComponent = ({ zoomInOnCenter }) => {
     return (
         <span>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom in"
-          onClick={() => zoomInOnCenter(true)}
-      >
-        <span className="fa fa-plus"/>
-      </button>
-      <button
-          className="btn btn-default btn-circle btn-sm mr-1"
-          title="Zoom out"
-          onClick={() => zoomInOnCenter(false)}
-      >
-        <span className="fa fa-minus"/>
-      </button>
-    </span>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom in"
+                onClick={() => zoomInOnCenter(true)}
+            >
+                <span className="fa fa-plus" />
+            </button>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom out"
+                onClick={() => zoomInOnCenter(false)}
+            >
+                <span className="fa fa-minus" />
+            </button>
+        </span>
     )
 }
 
diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js
index 556d6a7b..8ccfe584 100644
--- a/frontend/src/components/app/map/elements/Backdrop.js
+++ b/frontend/src/components/app/map/elements/Backdrop.js
@@ -3,14 +3,6 @@ import { Rect } from 'react-konva'
 import { BACKDROP_COLOR } from '../../../../util/colors'
 import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
 
-const Backdrop = () => (
-    <Rect
-        x={0}
-        y={0}
-        width={MAP_SIZE_IN_PIXELS}
-        height={MAP_SIZE_IN_PIXELS}
-        fill={BACKDROP_COLOR}
-    />
-)
+const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
 
 export default Backdrop
diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js
index 6e56e059..8c573a6f 100644
--- a/frontend/src/components/app/map/elements/RackFillBar.js
+++ b/frontend/src/components/app/map/elements/RackFillBar.js
@@ -21,27 +21,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
     const x =
         positionX * TILE_SIZE_IN_PIXELS +
         OBJECT_MARGIN_IN_PIXELS +
-        (type === 'space'
-            ? halfOfObjectBorderWidth
-            : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
-    const startY =
-        positionY * TILE_SIZE_IN_PIXELS +
-        OBJECT_MARGIN_IN_PIXELS +
-        halfOfObjectBorderWidth
-    const width =
-        0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) -
-        halfOfObjectBorderWidth
-    const fullHeight =
-        TILE_SIZE_IN_PIXELS -
-        OBJECT_MARGIN_IN_PIXELS * 2 -
-        OBJECT_BORDER_WIDTH_IN_PIXELS
+        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
+    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
+    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
+    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
 
     const fractionHeight = fillFraction * fullHeight
     const fractionY =
-        (positionY + 1) * TILE_SIZE_IN_PIXELS -
-        OBJECT_MARGIN_IN_PIXELS -
-        halfOfObjectBorderWidth -
-        fractionHeight
+        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
 
     return (
         <Group>
@@ -50,22 +37,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
                 y={startY}
                 width={width}
                 height={fullHeight}
-                fill={
-                    type === 'space'
-                        ? RACK_SPACE_BAR_BACKGROUND_COLOR
-                        : RACK_ENERGY_BAR_BACKGROUND_COLOR
-                }
+                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
             />
             <Rect
                 x={x}
                 y={fractionY}
                 width={width}
                 height={fractionHeight}
-                fill={
-                    type === 'space'
-                        ? RACK_SPACE_BAR_FILL_COLOR
-                        : RACK_ENERGY_BAR_FILL_COLOR
-                }
+                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
             />
             <ImageComponent
                 src={'/img/topology/rack-' + type + '-icon.png'}
diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js
index dd6e0beb..be3a00a8 100644
--- a/frontend/src/components/app/map/elements/TilePlusIcon.js
+++ b/frontend/src/components/app/map/elements/TilePlusIcon.js
@@ -10,16 +10,12 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
             pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY +
-            TILE_SIZE_IN_PIXELS * mapScale -
-            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
         ],
         [
             pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelX +
-            TILE_SIZE_IN_PIXELS * mapScale -
-            TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
         ],
     ]
diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js
index d1ba6157..8aa2aebf 100644
--- a/frontend/src/components/app/map/elements/WallSegment.js
+++ b/frontend/src/components/app/map/elements/WallSegment.js
@@ -22,14 +22,7 @@ const WallSegment = ({ wallSegment }) => {
         ]
     }
 
-    return (
-        <Line
-            points={points}
-            lineCap="round"
-            stroke={WALL_COLOR}
-            strokeWidth={WALL_WIDTH_IN_PIXELS}
-        />
-    )
+    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
 }
 
 WallSegment.propTypes = {
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
index 10554834..ebc00244 100644
--- a/frontend/src/components/app/map/groups/GridGroup.js
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -4,13 +4,13 @@ import { GRID_COLOR } from '../../../../util/colors'
 import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
 const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
-const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     0,
     index * TILE_SIZE_IN_PIXELS,
     MAP_SIZE_IN_PIXELS,
     index * TILE_SIZE_IN_PIXELS,
 ])
-const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
     index * TILE_SIZE_IN_PIXELS,
     0,
     index * TILE_SIZE_IN_PIXELS,
@@ -19,9 +19,7 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
 
 const GridGroup = () => (
     <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(
-            VERTICAL_POINT_PAIRS,
-        ).map((points, index) => (
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
                 key={index}
                 points={points}
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 5d4ee5e2..eb6dc24a 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -9,22 +9,10 @@ import TileObject from '../elements/TileObject'
 const RackGroup = ({ tile }) => {
     return (
         <Group>
-            <TileObject
-                positionX={tile.positionX}
-                positionY={tile.positionY}
-                color={RACK_BACKGROUND_COLOR}
-            />
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
             <Group>
-                <RackSpaceFillContainer
-                    tileId={tile._id}
-                    positionX={tile.positionX}
-                    positionY={tile.positionY}
-                />
-                <RackEnergyFillContainer
-                    tileId={tile._id}
-                    positionX={tile.positionX}
-                    positionY={tile.positionY}
-                />
+                <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+                <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
             </Group>
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
index 4e3c7410..1fd54687 100644
--- a/frontend/src/components/app/map/groups/RoomGroup.js
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -5,17 +5,12 @@ import TileContainer from '../../../../containers/app/map/TileContainer'
 import WallContainer from '../../../../containers/app/map/WallContainer'
 import Shapes from '../../../../shapes/index'
 
-const RoomGroup = ({
-                       room,
-                       interactionLevel,
-                       currentRoomInConstruction,
-                       onClick,
-                   }) => {
+const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
     if (currentRoomInConstruction === room._id) {
         return (
             <Group onClick={onClick}>
-                {room.tileIds.map(tileId => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                {room.tileIds.map((tileId) => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
                 ))}
             </Group>
         )
@@ -25,26 +20,23 @@ const RoomGroup = ({
         <Group onClick={onClick}>
             {(() => {
                 if (
-                    (interactionLevel.mode === 'RACK' ||
-                        interactionLevel.mode === 'MACHINE') &&
+                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
                     interactionLevel.roomId === room._id
                 ) {
                     return [
                         room.tileIds
-                            .filter(tileId => tileId !== interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
-                        <GrayContainer key={-1}/>,
+                            .filter((tileId) => tileId !== interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+                        <GrayContainer key={-1} />,
                         room.tileIds
-                            .filter(tileId => tileId === interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                            .filter((tileId) => tileId === interactionLevel.tileId)
+                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
                     ]
                 } else {
-                    return room.tileIds.map(tileId => (
-                        <TileContainer key={tileId} tileId={tileId}/>
-                    ))
+                    return room.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
                 }
             })()}
-            <WallContainer roomId={room._id}/>
+            <WallContainer roomId={room._id} />
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index e984f05b..1e106823 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -9,7 +9,7 @@ import RoomTile from '../elements/RoomTile'
 const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
     let tileObject
     if (tile.rackId) {
-        tileObject = <RackContainer tile={tile}/>
+        tileObject = <RackContainer tile={tile} />
     } else {
         tileObject = null
     }
@@ -21,7 +21,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
 
     return (
         <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color}/>
+            <RoomTile tile={tile} color={color} />
             {tileObject}
         </Group>
     )
diff --git a/frontend/src/components/app/map/groups/TopologyGroup.js b/frontend/src/components/app/map/groups/TopologyGroup.js
index a40a1d41..6096fc8b 100644
--- a/frontend/src/components/app/map/groups/TopologyGroup.js
+++ b/frontend/src/components/app/map/groups/TopologyGroup.js
@@ -6,14 +6,14 @@ import Shapes from '../../../../shapes/index'
 
 const TopologyGroup = ({ topology, interactionLevel }) => {
     if (!topology) {
-        return <Group/>
+        return <Group />
     }
 
     if (interactionLevel.mode === 'BUILDING') {
         return (
             <Group>
-                {topology.roomIds.map(roomId => (
-                    <RoomContainer key={roomId} roomId={roomId}/>
+                {topology.roomIds.map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
                 ))}
             </Group>
         )
@@ -22,12 +22,16 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
     return (
         <Group>
             {topology.roomIds
-                .filter(roomId => roomId !== interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
+                .filter((roomId) => roomId !== interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
+            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
             {topology.roomIds
-                .filter(roomId => roomId === interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+                .filter((roomId) => roomId === interactionLevel.roomId)
+                .map((roomId) => (
+                    <RoomContainer key={roomId} roomId={roomId} />
+                ))}
         </Group>
     )
 }
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
index 81c72d94..7b0f5ca0 100644
--- a/frontend/src/components/app/map/groups/WallGroup.js
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -9,7 +9,7 @@ const WallGroup = ({ tiles }) => {
     return (
         <Group>
             {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
+                <WallSegment key={index} wallSegment={wallSegment} />
             ))}
         </Group>
     )
diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
index 25c9c412..bead87de 100644
--- a/frontend/src/components/app/map/layers/HoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -26,18 +26,13 @@ class HoverLayerComponent extends React.Component {
         }
 
         const positionX = Math.floor(
-            (this.props.mouseX - this.props.mapPosition.x) /
-            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+            (this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
         )
         const positionY = Math.floor(
-            (this.props.mouseY - this.props.mapPosition.y) /
-            (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+            (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
         )
 
-        if (
-            positionX !== this.state.positionX ||
-            positionY !== this.state.positionY
-        ) {
+        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
             this.setState({
                 positionX,
                 positionY,
@@ -48,15 +43,11 @@ class HoverLayerComponent extends React.Component {
 
     render() {
         if (!this.props.isEnabled()) {
-            return <Layer/>
+            return <Layer />
         }
 
-        const pixelX =
-            this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS +
-            this.props.mapPosition.x
-        const pixelY =
-            this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS +
-            this.props.mapPosition.y
+        const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x
+        const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y
 
         return (
             <Layer opacity={0.6}>
@@ -66,16 +57,15 @@ class HoverLayerComponent extends React.Component {
                     scale={this.props.mapScale}
                     isValid={this.state.validity}
                     onClick={() =>
-                        this.state.validity
-                            ? this.props.onClick(this.state.positionX, this.state.positionY)
-                            : undefined}
+                        this.state.validity ? this.props.onClick(this.state.positionX, this.state.positionY) : undefined
+                    }
                 />
                 {this.props.children
                     ? React.cloneElement(this.props.children, {
-                        pixelX,
-                        pixelY,
-                        scale: this.props.mapScale,
-                    })
+                          pixelX,
+                          pixelY,
+                          scale: this.props.mapScale,
+                      })
                     : undefined}
             </Layer>
         )
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
index 940057f9..8ee14c9c 100644
--- a/frontend/src/components/app/map/layers/MapLayerComponent.js
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -6,15 +6,10 @@ import GridGroup from '../groups/GridGroup'
 
 const MapLayerComponent = ({ mapPosition, mapScale }) => (
     <Layer>
-        <Group
-            x={mapPosition.x}
-            y={mapPosition.y}
-            scaleX={mapScale}
-            scaleY={mapScale}
-        >
-            <Backdrop/>
-            <TopologyContainer/>
-            <GridGroup/>
+        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+            <Backdrop />
+            <TopologyContainer />
+            <GridGroup />
         </Group>
     </Layer>
 )
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
index 31689635..661fc255 100644
--- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 import TilePlusIcon from '../elements/TilePlusIcon'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const ObjectHoverLayerComponent = props => (
+const ObjectHoverLayerComponent = (props) => (
     <HoverLayerComponent {...props}>
         <TilePlusIcon {...props} />
     </HoverLayerComponent>
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
index d3d5e9b2..887e2891 100644
--- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import HoverLayerComponent from './HoverLayerComponent'
 
-const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />
+const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} />
 
 export default RoomHoverLayerComponent
-- 
cgit v1.2.3