refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.

36 files changed, 0 insertions, 1334 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
deleted file mode 100644
index 4791940f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/GrayContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
-import GrayLayer from '../../../components/app/map/elements/GrayLayer'
-
-const GrayContainer = () => {
-    const dispatch = useDispatch()
-    const onClick = () => dispatch(goDownOneInteractionLevel())
-    return <GrayLayer onClick={onClick} />
-}
-
-export default GrayContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js b/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
deleted file mode 100644
index 4c3b2757..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapConstants.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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_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 / 16
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 16
-export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10
-
-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 MAX_NUM_UNITS_PER_MACHINE = 6
-export const DEFAULT_RACK_SLOT_CAPACITY = 42
-export const DEFAULT_RACK_POWER_CAPACITY = 10000
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
deleted file mode 100644
index 5d19b3ad..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { HotKeys } from 'react-hotkeys'
-import { Stage } from 'react-konva'
-import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { Provider, useStore } from 'react-redux'
-import useResizeObserver from 'use-resize-observer'
-import { mapContainer } from './MapStage.module.scss'
-import MapLayer from './layers/MapLayer'
-import RoomHoverLayer from './layers/RoomHoverLayer'
-import ObjectHoverLayer from './layers/ObjectHoverLayer'
-import ScaleIndicator from './controls/ScaleIndicator'
-import Toolbar from './controls/Toolbar'
-
-function MapStage() {
-    const store = useStore()
-    const { ref, width = 100, height = 100 } = useResizeObserver()
-    const stageRef = useRef(null)
-    const [[x, y], setPos] = useState([0, 0])
-    const [scale, setScale] = useState(1)
-
-    const clampScale = (target) => Math.min(Math.max(target, MAP_MIN_SCALE), MAP_MAX_SCALE)
-    const moveWithDelta = (deltaX, deltaY) => setPos(([x, y]) => [x + deltaX, y + deltaY])
-
-    const onZoom = (e) => {
-        e.evt.preventDefault()
-
-        const stage = stageRef.current.getStage()
-        const oldScale = scale
-
-        const pointer = stage.getPointerPosition()
-        const mousePointTo = {
-            x: (pointer.x - x) / oldScale,
-            y: (pointer.y - y) / oldScale,
-        }
-
-        const newScale = clampScale(e.evt.deltaY > 0 ? oldScale * MAP_SCALE_PER_EVENT : oldScale / MAP_SCALE_PER_EVENT)
-
-        setScale(newScale)
-        setPos([pointer.x - mousePointTo.x * newScale, pointer.y - mousePointTo.y * newScale])
-    }
-    const onZoomButton = (zoomIn) =>
-        setScale((scale) => clampScale(zoomIn ? scale * MAP_SCALE_PER_EVENT : scale / MAP_SCALE_PER_EVENT))
-    const onDragEnd = (e) => setPos([e.target.x(), e.target.y()])
-    const onExport = () => {
-        const download = document.createElement('a')
-        download.href = stageRef.current.getStage().toDataURL()
-        download.download = 'opendc-canvas-export-' + Date.now() + '.png'
-        download.click()
-    }
-
-    const handlers = {
-        MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0),
-        MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT),
-        MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT),
-    }
-
-    return (
-        <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}>
-            <Stage
-                ref={stageRef}
-                onWheel={onZoom}
-                onDragEnd={onDragEnd}
-                draggable
-                width={width}
-                height={height}
-                scale={{ x: scale, y: scale }}
-                x={x}
-                y={y}
-            >
-                <Provider store={store}>
-                    <MapLayer />
-                    <RoomHoverLayer />
-                    <ObjectHoverLayer />
-                </Provider>
-            </Stage>
-            <ScaleIndicator scale={scale} />
-            <Toolbar onZoom={onZoomButton} onExport={onExport} />
-        </HotKeys>
-    )
-}
-
-export default MapStage
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
deleted file mode 100644
index d879b4c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.mapContainer {
-    background-color: var(--pf-global--Color--light-200);
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
deleted file mode 100644
index 3c75d3a7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import RackGroup from '../../../components/app/map/groups/RackGroup'
-import { Tile } from '../../../shapes'
-
-const RackContainer = ({ tile }) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    return <RackGroup interactionLevel={interactionLevel} tile={tile} />
-}
-
-RackContainer.propTypes = {
-    tile: Tile,
-}
-
-export default RackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
deleted file mode 100644
index dbc26f14..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackEnergyFillContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-function RackSpaceFillContainer({ tileId, ...props }) {
-    const fillFraction = useSelector((state) => {
-        let energyConsumptionTotal = 0
-        const rack = state.objects.rack[state.objects.tile[tileId].rack]
-        const machineIds = rack.machines
-        machineIds.forEach((machineId) => {
-            if (machineId !== null) {
-                const machine = state.objects.machine[machineId]
-                machine.cpus.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW))
-                machine.gpus.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW))
-                machine.memories.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)
-                )
-                machine.storages.forEach(
-                    (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)
-                )
-            }
-        })
-
-        return Math.min(1, energyConsumptionTotal / rack.powerCapacityW)
-    })
-    return <RackFillBar {...props} type="energy" fillFraction={fillFraction} />
-}
-
-RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
deleted file mode 100644
index 7ca5c930..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RackSpaceFillContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import RackFillBar from '../../../components/app/map/elements/RackFillBar'
-
-function RackSpaceFillContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    return <RackFillBar {...props} type="space" fillFraction={rack.machines.length / rack.capacity} />
-}
-
-RackSpaceFillContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default RackSpaceFillContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
deleted file mode 100644
index 26fbcd7a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/RoomContainer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
-import RoomGroup from '../../../components/app/map/groups/RoomGroup'
-
-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))} />
-}
-
-RoomContainer.propTypes = {
-    roomId: PropTypes.string,
-}
-
-export default RoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
deleted file mode 100644
index bfcbf735..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/TileContainer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useDispatch, useSelector } from 'react-redux'
-import { goFromRoomToRack } from '../../../redux/actions/interaction-level'
-import TileGroup from '../../../components/app/map/groups/TileGroup'
-
-const TileContainer = (props) => {
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-    const tile = useSelector((state) => state.objects.tile[props.tileId])
-
-    const dispatch = useDispatch()
-    const onClick = (tile) => {
-        if (tile.rack) {
-            dispatch(goFromRoomToRack(tile._id))
-        }
-    }
-    return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} />
-}
-
-TileContainer.propTypes = {
-    tileId: PropTypes.string.isRequired,
-}
-
-export default TileContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
deleted file mode 100644
index 78e75d0f..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/TopologyContainer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useSelector } from 'react-redux'
-import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
-import { useActiveTopology } from '../../../data/topology'
-
-const TopologyContainer = () => {
-    const topology = useActiveTopology()
-    const interactionLevel = useSelector((state) => state.interactionLevel)
-
-    return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
-}
-
-export default TopologyContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
deleted file mode 100644
index 51dffe4b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/WallContainer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useSelector } from 'react-redux'
-import WallGroup from '../../../components/app/map/groups/WallGroup'
-
-const WallContainer = (props) => {
-    const tiles = useSelector((state) =>
-        state.objects.room[props.roomId].tiles.map((tileId) => state.objects.tile[tileId])
-    )
-    return <WallGroup {...props} tiles={tiles} />
-}
-
-WallContainer.propTypes = {
-    roomId: PropTypes.string.isRequired,
-}
-
-export default WallContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
deleted file mode 100644
index f54b7c84..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import { ChevronLeftIcon } from '@patternfly/react-icons'
-import { collapseContainer } from './Collapse.module.scss'
-import { Button } from '@patternfly/react-core'
-
-function Collapse({ onClick }) {
-    return (
-        <div className={collapseContainer}>
-            <Button variant="tertiary" onClick={onClick}>
-                <ChevronLeftIcon />
-            </Button>
-        </div>
-    )
-}
-
-Collapse.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default Collapse
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
deleted file mode 100644
index 0c1fac94..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Collapse.module.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/*!
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-.collapseContainer {
-    position: absolute;
-    right: var(--pf-global--spacer--xs);
-    top: 0;
-    bottom: 10%;
-    margin: auto 0;
-    height: 50px;
-
-    button:global(.pf-m-tertiary) {
-        height: 100%;
-        padding: 2px;
-
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
deleted file mode 100644
index 11c2f2d3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { scaleIndicator } from './ScaleIndicator.module.scss'
-
-const ScaleIndicator = ({ scale }) => (
-    <div className={scaleIndicator} style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
-        {TILE_SIZE_IN_METERS}m
-    </div>
-)
-
-ScaleIndicator.propTypes = {
-    scale: PropTypes.number.isRequired,
-}
-
-export default ScaleIndicator
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
deleted file mode 100644
index f19e0ff2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/ScaleIndicator.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.scaleIndicator {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    z-index: 50;
-
-    border: solid 2px #212529;
-    border-top: none;
-    border-left: none;
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
deleted file mode 100644
index 4c60bfb2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { control, toolBar } from './Toolbar.module.scss'
-import { Button } from '@patternfly/react-core'
-import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCamera } from '@fortawesome/free-solid-svg-icons'
-
-const Toolbar = ({ onZoom, onExport }) => (
-    <div className={toolBar}>
-        <Button variant="tertiary" title="Zoom in" onClick={() => onZoom(true)} className={control}>
-            <SearchPlusIcon />
-        </Button>
-        <Button variant="tertiary" title="Zoom out" onClick={() => onZoom(false)} className={control}>
-            <SearchMinusIcon />
-        </Button>
-        <Button variant="tertiary" title="Export Canvas to PNG Image" onClick={() => onExport()} className={control}>
-            <FontAwesomeIcon icon={faCamera} />
-        </Button>
-    </div>
-)
-
-Toolbar.propTypes = {
-    onZoom: PropTypes.func,
-    onExport: PropTypes.func,
-}
-
-export default Toolbar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
deleted file mode 100644
index 0d505acc..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/controls/Toolbar.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.toolBar {
-    position: absolute;
-    bottom: var(--pf-global--spacer--md);
-    left: var(--pf-global--spacer--xl);
-}
-
-.control {
-    &:global(.pf-m-tertiary) {
-        margin-right: var(--pf-global--spacer--xs);
-        margin-top: var(--pf-global--spacer--xs);
-        background-color: var(--pf-global--BackgroundColor--100);
-        border: none;
-        border-radius: var(--pf-global--BorderRadius--sm);
-        box-shadow: var(--pf-global--BoxShadow--sm);
-
-        &:not(:global(.pf-m-disabled)) {
-            background-color: var(--pf-global--BackgroundColor--100);
-        }
-
-        &:after {
-            display: none;
-        }
-
-        &:hover {
-            border: none;
-            box-shadow: var(--pf-global--BoxShadow--md);
-        }
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
deleted file mode 100644
index 8ccfe584..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
+++ /dev/null
@@ -1,8 +0,0 @@
-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} />
-
-export default Backdrop
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
deleted file mode 100644
index 35af4d96..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-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}
-    />
-)
-
-GrayLayer.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
deleted file mode 100644
index 0369bb79..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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 = ({ x, y, isValid, scale = 1, onClick }) => (
-    <Rect
-        x={x}
-        y={y}
-        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 = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    isValid: PropTypes.bool.isRequired,
-    scale: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default HoverTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
deleted file mode 100644
index 7d304b6b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-import { Image } from 'react-konva'
-
-const imageCaches = {}
-
-function ImageComponent({ src, x, y, width, height, opacity }) {
-    const [image, setImage] = useState(null)
-
-    useEffect(() => {
-        if (imageCaches[src]) {
-            setImage(imageCaches[src])
-            return
-        }
-
-        const image = new window.Image()
-        image.src = src
-        image.onload = () => {
-            setImage(image)
-            imageCaches[src] = image
-        }
-    }, [src])
-
-    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
-}
-
-ImageComponent.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,
-}
-
-export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
deleted file mode 100644
index aa284944..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
+++ /dev/null
@@ -1,68 +0,0 @@
-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'
-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'
-
-function 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 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>
-    )
-}
-
-RackFillBar.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    type: PropTypes.string.isRequired,
-    fillFraction: PropTypes.number.isRequired,
-}
-
-export default RackFillBar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
deleted file mode 100644
index ed718601..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { Tile } from '../../../../shapes'
-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}
-    />
-)
-
-RoomTile.propTypes = {
-    tile: Tile,
-    color: PropTypes.string,
-}
-
-export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
deleted file mode 100644
index 9e87cc82..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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}
-    />
-)
-
-TileObject.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-}
-
-export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
deleted file mode 100644
index 186c2b3a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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'
-
-function TilePlusIcon({ x, y, scale = 1 }) {
-    const linePoints = [
-        [
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-        ],
-        [
-            x + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            x + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-        ],
-    ]
-    return (
-        <Group>
-            {linePoints.map((points, index) => (
-                <Line
-                    key={index}
-                    points={points}
-                    lineCap="round"
-                    stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
-                    listening={false}
-                />
-            ))}
-        </Group>
-    )
-}
-
-TilePlusIcon.propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    scale: PropTypes.number,
-}
-
-export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
deleted file mode 100644
index ad6412c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { Line } from 'react-konva'
-import { WallSegment as WallSegmentShape } from '../../../../shapes'
-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,
-        ]
-    }
-
-    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
-}
-
-WallSegment.propTypes = {
-    wallSegment: WallSegmentShape,
-}
-
-export default WallSegment
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
deleted file mode 100644
index ebc00244..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
+++ /dev/null
@@ -1,34 +0,0 @@
-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 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) => [
-    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>
-)
-
-export default GridGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
deleted file mode 100644
index 9c4abc4a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
-import TileObject from '../elements/TileObject'
-import RackSpaceFillContainer from '../RackSpaceFillContainer'
-import RackEnergyFillContainer from '../RackEnergyFillContainer'
-
-const RackGroup = ({ tile }) => {
-    return (
-        <Group>
-            <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} />
-            </Group>
-        </Group>
-    )
-}
-
-RackGroup.propTypes = {
-    tile: Tile,
-}
-
-export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
deleted file mode 100644
index a14f3676..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { InteractionLevel, Room } from '../../../../shapes'
-import GrayContainer from '../GrayContainer'
-import TileContainer from '../TileContainer'
-import WallContainer from '../WallContainer'
-
-const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
-    if (currentRoomInConstruction === room._id) {
-        return (
-            <Group onClick={onClick}>
-                {room.tiles.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.tiles
-                            .filter((tileId) => tileId !== interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                        <GrayContainer key={-1} />,
-                        room.tiles
-                            .filter((tileId) => tileId === interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                    ]
-                } else {
-                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
-                }
-            })()}
-            <WallContainer roomId={room._id} />
-        </Group>
-    )
-}
-
-RoomGroup.propTypes = {
-    room: Room,
-    interactionLevel: InteractionLevel,
-    currentRoomInConstruction: PropTypes.string,
-    onClick: PropTypes.func,
-}
-
-export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
deleted file mode 100644
index cd36c7e5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
-import RoomTile from '../elements/RoomTile'
-import RackContainer from '../RackContainer'
-
-const TileGroup = ({ tile, newTile, onClick }) => {
-    let tileObject
-    if (tile.rack) {
-        tileObject = <RackContainer tile={tile} />
-    } else {
-        tileObject = null
-    }
-
-    let color = ROOM_DEFAULT_COLOR
-    if (newTile) {
-        color = ROOM_IN_CONSTRUCTION_COLOR
-    }
-
-    return (
-        <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color} />
-            {tileObject}
-        </Group>
-    )
-}
-
-TileGroup.propTypes = {
-    tile: Tile,
-    newTile: PropTypes.bool,
-    onClick: PropTypes.func,
-}
-
-export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
deleted file mode 100644
index d3bcb279..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Group } from 'react-konva'
-import { InteractionLevel, Topology } from '../../../../shapes'
-import RoomContainer from '../RoomContainer'
-import GrayContainer from '../GrayContainer'
-
-const TopologyGroup = ({ topology, interactionLevel }) => {
-    if (!topology) {
-        return <Group />
-    }
-
-    if (interactionLevel.mode === 'BUILDING') {
-        return (
-            <Group>
-                {topology.rooms.map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            </Group>
-        )
-    }
-
-    return (
-        <Group>
-            {topology.rooms
-                .filter((roomId) => roomId !== interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
-            {topology.rooms
-                .filter((roomId) => roomId === interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-        </Group>
-    )
-}
-
-TopologyGroup.propTypes = {
-    topology: Topology,
-    interactionLevel: InteractionLevel,
-}
-
-export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
deleted file mode 100644
index c73a95a7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-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>
-    )
-}
-
-WallGroup.propTypes = {
-    tiles: PropTypes.arrayOf(Tile).isRequired,
-}
-
-export default WallGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
deleted file mode 100644
index 2b1060c0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useMemo, useState } from 'react'
-import { Layer } from 'react-konva/lib/ReactKonva'
-import HoverTile from '../elements/HoverTile'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { useEffectRef } from '../../../../util/effect-ref'
-
-function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
-    const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
-
-    const layerRef = useEffectRef((layer) => {
-        if (!layer) {
-            return
-        }
-
-        const stage = layer.getStage()
-
-        // Transform used to convert mouse coordinates to world coordinates
-        const transform = stage.getAbsoluteTransform().copy()
-        transform.invert()
-
-        stage.on('mousemove.hover', () => {
-            const { x, y } = transform.point(stage.getPointerPosition())
-            setPos([x, y])
-        })
-        return () => stage.off('mousemove.hover')
-    })
-
-    const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
-    const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
-    const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
-
-    if (!isEnabled) {
-        return <Layer />
-    }
-
-    const x = gridX * TILE_SIZE_IN_PIXELS
-    const y = gridY * TILE_SIZE_IN_PIXELS
-
-    return (
-        <Layer opacity={0.6} ref={layerRef}>
-            <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
-            {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
-        </Layer>
-    )
-}
-
-HoverLayerComponent.propTypes = {
-    isEnabled: PropTypes.bool.isRequired,
-    isValid: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired,
-    children: PropTypes.node,
-}
-
-export default HoverLayerComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
deleted file mode 100644
index c902532b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/MapLayer.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { Group, Layer } from 'react-konva'
-import Backdrop from '../elements/Backdrop'
-import TopologyContainer from '../TopologyContainer'
-import GridGroup from '../groups/GridGroup'
-
-function MapLayer() {
-    return (
-        <Layer>
-            <Group>
-                <Backdrop />
-                <TopologyContainer />
-                <GridGroup />
-            </Group>
-        </Layer>
-    )
-}
-
-export default MapLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
deleted file mode 100644
index 47d9c992..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/ObjectHoverLayer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addRackToTile } from '../../../../redux/actions/topology/room'
-import { findTileWithPosition } from '../../../../util/tile-calculations'
-import HoverLayerComponent from './HoverLayerComponent'
-import TilePlusIcon from '../elements/TilePlusIcon'
-
-function ObjectHoverLayer() {
-    const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
-    const isValid = useSelector((state) => (x, y) => {
-        if (state.interactionLevel.mode !== 'ROOM') {
-            return false
-        }
-
-        const currentRoom = state.objects.room[state.interactionLevel.roomId]
-        const tiles = currentRoom.tiles.map((tileId) => state.objects.tile[tileId])
-        const tile = findTileWithPosition(tiles, x, y)
-
-        return !(tile === null || tile.rack)
-    })
-
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(addRackToTile(x, y))
-    return (
-        <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid}>
-            <TilePlusIcon />
-        </HoverLayerComponent>
-    )
-}
-
-export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
deleted file mode 100644
index 59f83b2b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/RoomHoverLayer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { toggleTileAtLocation } from '../../../../redux/actions/topology/building'
-import {
-    deriveValidNextTilePositions,
-    findPositionInPositions,
-    findPositionInRooms,
-} from '../../../../util/tile-calculations'
-import HoverLayerComponent from './HoverLayerComponent'
-
-function RoomHoverLayer() {
-    const dispatch = useDispatch()
-    const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
-    const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
-    const isValid = useSelector((state) => (x, y) => {
-        const newRoom = { ...state.objects.room[state.construction.currentRoomInConstruction] }
-        const oldRooms = Object.keys(state.objects.room)
-            .map((id) => ({ ...state.objects.room[id] }))
-            .filter(
-                (room) =>
-                    state.objects.topology[state.currentTopologyId].rooms.indexOf(room._id) !== -1 &&
-                    room._id !== state.construction.currentRoomInConstruction
-            )
-
-        ;[...oldRooms, newRoom].forEach((room) => {
-            room.tiles = room.tiles.map((tileId) => state.objects.tile[tileId])
-        })
-        if (newRoom.tiles.length === 0) {
-            return findPositionInRooms(oldRooms, x, y) === -1
-        }
-
-        const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles)
-        return findPositionInPositions(validNextPositions, x, y) !== -1
-    })
-
-    return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
-}
-
-export default RoomHoverLayer