ui: Update frontend dependencies

This pull request updates the React dependencies used in the OpenDC frontend.

* Actualize React, react-konva and react-scripts
* Actualize Bootstrap and Reactstrap
* Migrate to Redux hooks to reduce clutter

14 files changed, 171 insertions, 192 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
index 9e4a6969..651b3459 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js
@@ -1,13 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch } from 'react-redux'
 import { goDownOneInteractionLevel } from '../../../actions/interaction-level'
 import GrayLayer from '../../../components/app/map/elements/GrayLayer'
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    }
+const GrayContainer = () => {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+    return <GrayLayer onClick={onClick} />
 }
 
-const GrayContainer = connect(undefined, mapDispatchToProps)(GrayLayer)
-
 export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
index 23c920b6..61d123e8 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
@@ -1,22 +1,23 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map'
 import MapStageComponent from '../../../components/app/map/MapStageComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapDimensions: state.map.dimensions,
-    }
+const MapStage = () => {
+    const { position, dimensions } = useSelector((state) => state.map)
+    const dispatch = useDispatch()
+    const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y))
+    const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y))
+    const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height))
+    return (
+        <MapStageComponent
+            mapPosition={position}
+            mapDimensions={dimensions}
+            zoomInOnPosition={zoomInOnPositionA}
+            setMapPositionWithBoundsCheck={setMapPositionWithBoundsCheckA}
+            setMapDimensions={setMapDimensionsA}
+        />
+    )
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        zoomInOnPosition: (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y)),
-        setMapPositionWithBoundsCheck: (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y)),
-        setMapDimensions: (width, height) => dispatch(setMapDimensions(width, height)),
-    }
-}
-
-const MapStage = connect(mapStateToProps, mapDispatchToProps)(MapStageComponent)
-
 export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js
index 40077608..e5af5117 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js
@@ -1,12 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RackGroup from '../../../components/app/map/groups/RackGroup'
 
-const mapStateToProps = (state) => {
-    return {
-        interactionLevel: state.interactionLevel,
-    }
+const RackContainer = ({ tile }) => {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    return <RackGroup interactionLeve={interactionLevel} tile={tile} />
 }
 
-const RackContainer = connect(mapStateToProps)(RackGroup)
-
 export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
index 53746271..00d3152f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js
@@ -1,26 +1,32 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 
-const mapStateToProps = (state, ownProps) => {
-    let energyConsumptionTotal = 0
-    const rack = state.objects.rack[state.objects.tile[ownProps.tileId].rackId]
-    const machineIds = rack.machineIds
-    machineIds.forEach((machineId) => {
-        if (machineId !== null) {
-            const machine = state.objects.machine[machineId]
-            machine.cpuIds.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-            machine.gpuIds.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
-            machine.memoryIds.forEach((id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW))
-            machine.storageIds.forEach((id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW))
+const RackSpaceFillContainer = (props) => {
+    const state = useSelector((state) => {
+        let energyConsumptionTotal = 0
+        const rack = state.objects.rack[state.objects.tile[props.tileId].rackId]
+        const machineIds = rack.machineIds
+        machineIds.forEach((machineId) => {
+            if (machineId !== null) {
+                const machine = state.objects.machine[machineId]
+                machine.cpuIds.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
+                machine.gpuIds.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
+                machine.memoryIds.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
+                )
+                machine.storageIds.forEach(
+                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
+                )
+            }
+        })
+
+        return {
+            type: 'energy',
+            fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW),
         }
     })
-
-    return {
-        type: 'energy',
-        fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW),
-    }
+    return <RackFillBar {...props} {...state} />
 }
 
-const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar)
-
 export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
index 0509a5a5..dc5119fd 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js
@@ -1,14 +1,16 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import RackFillBar from '../../../components/app/map/elements/RackFillBar'
 
-const mapStateToProps = (state, ownProps) => {
-    const machineIds = state.objects.rack[state.objects.tile[ownProps.tileId].rackId].machineIds
-    return {
-        type: 'space',
-        fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
-    }
+const RackSpaceFillContainer = (props) => {
+    const state = useSelector((state) => {
+        const machineIds = state.objects.rack[state.objects.tile[props.tileId].rackId].machineIds
+        return {
+            type: 'space',
+            fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length,
+        }
+    })
+    return <RackFillBar {...props} {...state} />
 }
 
-const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar)
-
 export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
index 91bf4e5d..877233fc 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js
@@ -1,21 +1,18 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { goFromBuildingToRoom } from '../../../actions/interaction-level'
 import RoomGroup from '../../../components/app/map/groups/RoomGroup'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        interactionLevel: state.interactionLevel,
-        currentRoomInConstruction: state.construction.currentRoomInConstruction,
-        room: state.objects.room[ownProps.roomId],
-    }
+const RoomContainer = (props) => {
+    const state = useSelector((state) => {
+        return {
+            interactionLevel: state.interactionLevel,
+            currentRoomInConstruction: state.construction.currentRoomInConstruction,
+            room: state.objects.room[props.roomId],
+        }
+    })
+    const dispatch = useDispatch()
+    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} />
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)),
-    }
-}
-
-const RoomContainer = connect(mapStateToProps, mapDispatchToProps)(RoomGroup)
-
 export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
index 04d6c8d6..ad7301a7 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js
@@ -1,26 +1,19 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { goFromRoomToRack } from '../../../actions/interaction-level'
 import TileGroup from '../../../components/app/map/groups/TileGroup'
 
-const mapStateToProps = (state, ownProps) => {
-    const tile = state.objects.tile[ownProps.tileId]
+const TileContainer = (props) => {
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const tile = useSelector((state) => state.objects.tile[props.tileId])
 
-    return {
-        interactionLevel: state.interactionLevel,
-        tile,
+    const dispatch = useDispatch()
+    const onClick = (tile) => {
+        if (tile.rackId) {
+            dispatch(goFromRoomToRack(tile._id))
+        }
     }
+    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: (tile) => {
-            if (tile.rackId) {
-                dispatch(goFromRoomToRack(tile._id))
-            }
-        },
-    }
-}
-
-const TileContainer = connect(mapStateToProps, mapDispatchToProps)(TileGroup)
-
 export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
index de43a151..612ca41c 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
@@ -1,17 +1,14 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
 
-const mapStateToProps = (state) => {
-    if (state.currentTopologyId === '-1') {
-        return {}
-    }
+const TopologyContainer = () => {
+    const topology = useSelector(
+        (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId]
+    )
+    const interactionLevel = useSelector((state) => state.interactionLevel)
 
-    return {
-        topology: state.objects.topology[state.currentTopologyId],
-        interactionLevel: state.interactionLevel,
-    }
+    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
 }
 
-const TopologyContainer = connect(mapStateToProps)(TopologyGroup)
-
 export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
index 67f8a242..2a469860 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js
@@ -1,12 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import WallGroup from '../../../components/app/map/groups/WallGroup'
 
-const mapStateToProps = (state, ownProps) => {
-    return {
-        tiles: state.objects.room[ownProps.roomId].tileIds.map((tileId) => state.objects.tile[tileId]),
-    }
+const WallContainer = (props) => {
+    const tiles = useSelector((state) =>
+        state.objects.room[props.roomId].tileIds.map((tileId) => state.objects.tile[tileId])
+    )
+    return <WallGroup {...props} tiles={tiles} />
 }
 
-const WallContainer = connect(mapStateToProps)(WallGroup)
-
 export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
index fa3b9d22..e9d58b9f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
@@ -1,12 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        scale: state.map.scale,
-    }
+const ScaleIndicatorContainer = (props) => {
+    const scale = useSelector((state) => state.map.scale)
+    return <ScaleIndicatorComponent {...props} scale={scale} />
 }
 
-const ScaleIndicatorContainer = connect(mapStateToProps)(ScaleIndicatorComponent)
-
 export default ScaleIndicatorContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
index ddc68cc7..a18dfd5b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
@@ -1,19 +1,12 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { zoomInOnCenter } from '../../../../actions/map'
 import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        mapScale: state.map.scale,
-    }
+const ZoomControlContainer = () => {
+    const dispatch = useDispatch()
+    const scale = useSelector((state) => state.map.scale)
+    return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} />
 }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        zoomInOnCenter: (zoomIn) => dispatch(zoomInOnCenter(zoomIn)),
-    }
-}
-
-const ZoomControlContainer = connect(mapStateToProps, mapDispatchToProps)(ZoomControlComponent)
-
 export default ZoomControlContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
index 8596cb9c..5f701b4b 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
@@ -1,13 +1,10 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-    }
+const MapLayer = (props) => {
+    const { position, scale } = useSelector((state) => state.map)
+    return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
 }
 
-const MapLayer = connect(mapStateToProps)(MapLayerComponent)
-
 export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
index a4927862..cefdf35c 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -1,33 +1,32 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { addRackToTile } from '../../../../actions/topology/room'
 import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent'
 import { findTileWithPosition } from '../../../../util/tile-calculations'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-        isEnabled: () => state.construction.inRackConstructionMode,
-        isValid: (x, y) => {
-            if (state.interactionLevel.mode !== 'ROOM') {
-                return false
-            }
+const ObjectHoverLayer = (props) => {
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.inRackConstructionMode,
+            isValid: (x, y) => {
+                if (state.interactionLevel.mode !== 'ROOM') {
+                    return false
+                }
 
-            const currentRoom = state.objects.room[state.interactionLevel.roomId]
-            const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId])
-            const tile = findTileWithPosition(tiles, x, y)
+                const currentRoom = state.objects.room[state.interactionLevel.roomId]
+                const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId])
+                const tile = findTileWithPosition(tiles, x, y)
 
-            return !(tile === null || tile.rackId)
-        },
-    }
-}
+                return !(tile === null || tile.rackId)
+            },
+        }
+    })
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: (x, y) => dispatch(addRackToTile(x, y)),
-    }
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(addRackToTile(x, y))
+    return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} />
 }
 
-const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)(ObjectHoverLayerComponent)
-
 export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
index 66404f9e..2717d890 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js
@@ -1,4 +1,5 @@
-import { connect } from 'react-redux'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
 import { toggleTileAtLocation } from '../../../../actions/topology/building'
 import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent'
 import {
@@ -7,40 +8,38 @@ import {
     findPositionInRooms,
 } from '../../../../util/tile-calculations'
 
-const mapStateToProps = (state) => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-        isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
-        isValid: (x, y) => {
-            const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
-            const oldRooms = Object.keys(state.objects.room)
-                .map((id) => Object.assign({}, state.objects.room[id]))
-                .filter(
-                    (room) =>
-                        state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 &&
-                        room._id !== state.construction.currentRoomInConstruction
-                )
+const RoomHoverLayer = (props) => {
+    const dispatch = useDispatch()
+    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
 
-            ;[...oldRooms, newRoom].forEach((room) => {
-                room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])
-            })
-            if (newRoom.tileIds.length === 0) {
-                return findPositionInRooms(oldRooms, x, y) === -1
-            }
+    const state = useSelector((state) => {
+        return {
+            mapPosition: state.map.position,
+            mapScale: state.map.scale,
+            isEnabled: () => state.construction.currentRoomInConstruction !== '-1',
+            isValid: (x, y) => {
+                const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction])
+                const oldRooms = Object.keys(state.objects.room)
+                    .map((id) => Object.assign({}, state.objects.room[id]))
+                    .filter(
+                        (room) =>
+                            state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 &&
+                            room._id !== state.construction.currentRoomInConstruction
+                    )
 
-            const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-            return findPositionInPositions(validNextPositions, x, y) !== -1
-        },
-    }
-}
+                ;[...oldRooms, newRoom].forEach((room) => {
+                    room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId])
+                })
+                if (newRoom.tileIds.length === 0) {
+                    return findPositionInRooms(oldRooms, x, y) === -1
+                }
 
-const mapDispatchToProps = (dispatch) => {
-    return {
-        onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)),
-    }
+                const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
+                return findPositionInPositions(validNextPositions, x, y) !== -1
+            },
+        }
+    })
+    return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} />
 }
 
-const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)(RoomHoverLayerComponent)
-
 export default RoomHoverLayer