From bf7708f658cc6299a3b775afe24459b5a808c54d Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 21:20:54 +0200
Subject: Restructure component and container directories

---
 src/components/app/map/LoadingScreen.js            |  11 ++
 src/components/app/map/MapConstants.js             |  28 +++++
 src/components/app/map/MapStageComponent.js        | 135 +++++++++++++++++++++
 .../app/map/controls/ExportCanvasComponent.js      |  13 ++
 .../app/map/controls/ScaleIndicatorComponent.js    |  14 +++
 .../app/map/controls/ScaleIndicatorComponent.sass  |   9 ++
 .../app/map/controls/ToolPanelComponent.js         |  13 ++
 .../app/map/controls/ToolPanelComponent.sass       |   5 +
 .../app/map/controls/ZoomControlComponent.js       |  31 +++++
 src/components/app/map/elements/Backdrop.js        |  16 +++
 src/components/app/map/elements/GrayLayer.js       |  17 +++
 src/components/app/map/elements/HoverTile.js       |  27 +++++
 src/components/app/map/elements/ImageComponent.js  |  48 ++++++++
 src/components/app/map/elements/RackFillBar.js     |  67 ++++++++++
 src/components/app/map/elements/RoomTile.js        |  20 +++
 src/components/app/map/elements/TileObject.js      |  25 ++++
 src/components/app/map/elements/TilePlusIcon.js    |  44 +++++++
 src/components/app/map/elements/WallSegment.js     |  39 ++++++
 src/components/app/map/groups/DatacenterGroup.js   |  42 +++++++
 src/components/app/map/groups/GridGroup.js         |  30 +++++
 src/components/app/map/groups/RackGroup.js         |  34 ++++++
 src/components/app/map/groups/RoomGroup.js         |  48 ++++++++
 src/components/app/map/groups/TileGroup.js         |  42 +++++++
 src/components/app/map/groups/WallGroup.js         |  22 ++++
 .../app/map/layers/HoverLayerComponent.js          |  63 ++++++++++
 src/components/app/map/layers/MapLayerComponent.js |  17 +++
 .../app/map/layers/ObjectHoverLayerComponent.js    |  11 ++
 .../app/map/layers/RoomHoverLayerComponent.js      |   8 ++
 src/components/app/sidebars/Sidebar.js             |  38 ++++++
 src/components/app/sidebars/Sidebar.sass           |  50 ++++++++
 .../app/sidebars/elements/LoadBarComponent.js      |  22 ++++
 .../app/sidebars/elements/LoadChartComponent.js    |  40 ++++++
 .../simulation/ExperimentMetadataComponent.js      |  12 ++
 .../app/sidebars/simulation/LoadMetricComponent.js |  33 +++++
 .../simulation/SimulationSidebarComponent.js       |  22 ++++
 .../simulation/SimulationSidebarComponent.sass     |   8 ++
 .../app/sidebars/simulation/TaskComponent.js       |  42 +++++++
 .../app/sidebars/simulation/TraceComponent.js      |  20 +++
 .../app/sidebars/topology/NameComponent.js         |  13 ++
 .../sidebars/topology/TopologySidebarComponent.js  |  35 ++++++
 .../topology/building/BuildingSidebarComponent.js  |  19 +++
 .../building/NewRoomConstructionComponent.js       |  27 +++++
 .../topology/machine/BackToRackComponent.js        |  10 ++
 .../topology/machine/DeleteMachineComponent.js     |  10 ++
 .../topology/machine/MachineNameComponent.js       |   7 ++
 .../topology/machine/MachineSidebarComponent.js    |  26 ++++
 .../sidebars/topology/machine/UnitAddComponent.js  |  38 ++++++
 .../app/sidebars/topology/machine/UnitComponent.js |  16 +++
 .../sidebars/topology/machine/UnitListComponent.js |  20 +++
 .../sidebars/topology/machine/UnitTabsComponent.js |  54 +++++++++
 .../sidebars/topology/rack/BackToRoomComponent.js  |  10 ++
 .../sidebars/topology/rack/DeleteRackComponent.js  |  10 ++
 .../sidebars/topology/rack/EmptySlotComponent.js   |  20 +++
 .../app/sidebars/topology/rack/MachineComponent.js |  65 ++++++++++
 .../sidebars/topology/rack/MachineListComponent.js |  20 +++
 .../topology/rack/MachineListComponent.sass        |   2 +
 .../sidebars/topology/rack/RackNameComponent.js    |   8 ++
 .../sidebars/topology/rack/RackSidebarComponent.js |  33 +++++
 .../topology/rack/RackSidebarComponent.sass        |  11 ++
 .../topology/room/BackToBuildingComponent.js       |  10 ++
 .../sidebars/topology/room/DeleteRoomComponent.js  |  10 ++
 .../topology/room/RackConstructionComponent.js     |  21 ++++
 .../sidebars/topology/room/RoomNameComponent.js    |   8 ++
 .../sidebars/topology/room/RoomSidebarComponent.js |  35 ++++++
 .../sidebars/topology/room/RoomTypeComponent.js    |  10 ++
 src/components/app/timeline/PlayButtonComponent.js |  12 ++
 src/components/app/timeline/Timeline.sass          | 112 +++++++++++++++++
 src/components/app/timeline/TimelineComponent.js   |  37 ++++++
 .../app/timeline/TimelineControlsComponent.js      |  39 ++++++
 .../app/timeline/TimelineLabelsComponent.js        |  11 ++
 src/components/map/LoadingScreen.js                |  11 --
 src/components/map/MapConstants.js                 |  28 -----
 src/components/map/MapStageComponent.js            | 135 ---------------------
 .../map/controls/ExportCanvasComponent.js          |  13 --
 .../map/controls/ScaleIndicatorComponent.js        |  14 ---
 .../map/controls/ScaleIndicatorComponent.sass      |   9 --
 src/components/map/controls/ToolPanelComponent.js  |  13 --
 .../map/controls/ToolPanelComponent.sass           |   5 -
 .../map/controls/ZoomControlComponent.js           |  31 -----
 src/components/map/elements/Backdrop.js            |  16 ---
 src/components/map/elements/GrayLayer.js           |  17 ---
 src/components/map/elements/HoverTile.js           |  27 -----
 src/components/map/elements/ImageComponent.js      |  48 --------
 src/components/map/elements/RackFillBar.js         |  67 ----------
 src/components/map/elements/RoomTile.js            |  20 ---
 src/components/map/elements/TileObject.js          |  25 ----
 src/components/map/elements/TilePlusIcon.js        |  44 -------
 src/components/map/elements/WallSegment.js         |  39 ------
 src/components/map/groups/DatacenterGroup.js       |  42 -------
 src/components/map/groups/GridGroup.js             |  30 -----
 src/components/map/groups/RackGroup.js             |  34 ------
 src/components/map/groups/RoomGroup.js             |  48 --------
 src/components/map/groups/TileGroup.js             |  42 -------
 src/components/map/groups/WallGroup.js             |  22 ----
 src/components/map/layers/HoverLayerComponent.js   |  63 ----------
 src/components/map/layers/MapLayerComponent.js     |  17 ---
 .../map/layers/ObjectHoverLayerComponent.js        |  11 --
 .../map/layers/RoomHoverLayerComponent.js          |   8 --
 src/components/sidebars/Sidebar.js                 |  38 ------
 src/components/sidebars/Sidebar.sass               |  50 --------
 .../sidebars/elements/LoadBarComponent.js          |  22 ----
 .../sidebars/elements/LoadChartComponent.js        |  40 ------
 .../simulation/ExperimentMetadataComponent.js      |  12 --
 .../sidebars/simulation/LoadMetricComponent.js     |  33 -----
 .../simulation/SimulationSidebarComponent.js       |  22 ----
 .../simulation/SimulationSidebarComponent.sass     |   8 --
 .../sidebars/simulation/TaskComponent.js           |  42 -------
 .../sidebars/simulation/TraceComponent.js          |  20 ---
 src/components/sidebars/topology/NameComponent.js  |  13 --
 .../sidebars/topology/TopologySidebarComponent.js  |  35 ------
 .../topology/building/BuildingSidebarComponent.js  |  16 ---
 .../building/NewRoomConstructionComponent.js       |  27 -----
 .../topology/machine/BackToRackComponent.js        |  10 --
 .../topology/machine/DeleteMachineComponent.js     |  12 --
 .../topology/machine/MachineNameComponent.js       |   7 --
 .../topology/machine/MachineSidebarComponent.js    |  26 ----
 .../sidebars/topology/machine/UnitAddComponent.js  |  38 ------
 .../sidebars/topology/machine/UnitComponent.js     |  16 ---
 .../sidebars/topology/machine/UnitListComponent.js |  20 ---
 .../sidebars/topology/machine/UnitTabsComponent.js |  54 ---------
 .../sidebars/topology/rack/BackToRoomComponent.js  |  10 --
 .../sidebars/topology/rack/DeleteRackComponent.js  |  12 --
 .../sidebars/topology/rack/EmptySlotComponent.js   |  20 ---
 .../sidebars/topology/rack/MachineComponent.js     |  65 ----------
 .../sidebars/topology/rack/MachineListComponent.js |  20 ---
 .../topology/rack/MachineListComponent.sass        |   2 -
 .../sidebars/topology/rack/RackNameComponent.js    |   8 --
 .../sidebars/topology/rack/RackSidebarComponent.js |  33 -----
 .../topology/rack/RackSidebarComponent.sass        |  11 --
 .../topology/room/BackToBuildingComponent.js       |  10 --
 .../sidebars/topology/room/DeleteRoomComponent.js  |  12 --
 .../topology/room/RackConstructionComponent.js     |  21 ----
 .../sidebars/topology/room/RoomNameComponent.js    |   8 --
 .../sidebars/topology/room/RoomSidebarComponent.js |  35 ------
 .../sidebars/topology/room/RoomTypeComponent.js    |  10 --
 src/components/timeline/PlayButtonComponent.js     |  12 --
 src/components/timeline/Timeline.sass              | 112 -----------------
 src/components/timeline/TimelineComponent.js       |  37 ------
 .../timeline/TimelineControlsComponent.js          |  39 ------
 src/components/timeline/TimelineLabelsComponent.js |  11 --
 src/containers/app/map/DatacenterContainer.js      |  19 +++
 src/containers/app/map/GrayContainer.js            |  16 +++
 src/containers/app/map/MapStage.js                 |  26 ++++
 src/containers/app/map/RackContainer.js            |  26 ++++
 src/containers/app/map/RackEnergyFillContainer.js  |  28 +++++
 src/containers/app/map/RackSpaceFillContainer.js   |  16 +++
 src/containers/app/map/RoomContainer.js            |  24 ++++
 src/containers/app/map/TileContainer.js            |  40 ++++++
 src/containers/app/map/WallContainer.js            |  14 +++
 .../app/map/controls/ScaleIndicatorContainer.js    |  14 +++
 .../app/map/controls/ZoomControlContainer.js       |  22 ++++
 src/containers/app/map/layers/MapLayer.js          |  15 +++
 src/containers/app/map/layers/ObjectHoverLayer.js  |  37 ++++++
 src/containers/app/map/layers/RoomHoverLayer.js    |  50 ++++++++
 .../app/sidebars/elements/LoadBarContainer.js      |  25 ++++
 .../app/sidebars/elements/LoadChartContainer.js    |  27 +++++
 .../simulation/ExperimentMetadataContainer.js      |  29 +++++
 .../app/sidebars/simulation/LoadMetricContainer.js |  14 +++
 .../app/sidebars/simulation/TaskContainer.js       |  23 ++++
 .../app/sidebars/simulation/TraceContainer.js      |  22 ++++
 .../app/sidebars/topology/TopologySidebar.js       |  14 +++
 .../topology/building/BuildingSidebarContainer.js  |  14 +++
 .../building/NewRoomConstructionContainer.js       |  28 +++++
 .../topology/machine/BackToRackContainer.js        |  16 +++
 .../topology/machine/DeleteMachineContainer.js     |  16 +++
 .../topology/machine/MachineNameContainer.js       |  14 +++
 .../topology/machine/MachineSidebarContainer.js    |  16 +++
 .../sidebars/topology/machine/UnitAddContainer.js  |  22 ++++
 .../app/sidebars/topology/machine/UnitContainer.js |  23 ++++
 .../sidebars/topology/machine/UnitListContainer.js |  16 +++
 .../sidebars/topology/machine/UnitTabsContainer.js |  14 +++
 .../sidebars/topology/rack/BackToRoomContainer.js  |  16 +++
 .../sidebars/topology/rack/DeleteRackContainer.js  |  16 +++
 .../sidebars/topology/rack/EmptySlotContainer.js   |  22 ++++
 .../app/sidebars/topology/rack/MachineContainer.js |  35 ++++++
 .../sidebars/topology/rack/MachineListContainer.js |  14 +++
 .../sidebars/topology/rack/RackNameContainer.js    |  22 ++++
 .../sidebars/topology/rack/RackSidebarContainer.js |  15 +++
 .../topology/room/BackToBuildingContainer.js       |  16 +++
 .../sidebars/topology/room/DeleteRoomContainer.js  |  16 +++
 .../topology/room/RackConstructionContainer.js     |  23 ++++
 .../sidebars/topology/room/RoomNameContainer.js    |  22 ++++
 .../sidebars/topology/room/RoomSidebarContainer.js |  16 +++
 .../sidebars/topology/room/RoomTypeContainer.js    |  14 +++
 src/containers/app/timeline/PlayButtonContainer.js |  23 ++++
 src/containers/app/timeline/TimelineContainer.js   |  39 ++++++
 .../app/timeline/TimelineControlsContainer.js      |  34 ++++++
 .../app/timeline/TimelineLabelsContainer.js        |  15 +++
 src/containers/map/DatacenterContainer.js          |  19 ---
 src/containers/map/GrayContainer.js                |  16 ---
 src/containers/map/MapStage.js                     |  26 ----
 src/containers/map/RackContainer.js                |  26 ----
 src/containers/map/RackEnergyFillContainer.js      |  28 -----
 src/containers/map/RackSpaceFillContainer.js       |  16 ---
 src/containers/map/RoomContainer.js                |  24 ----
 src/containers/map/TileContainer.js                |  40 ------
 src/containers/map/WallContainer.js                |  14 ---
 .../map/controls/ScaleIndicatorContainer.js        |  14 ---
 .../map/controls/ZoomControlContainer.js           |  22 ----
 src/containers/map/layers/MapLayer.js              |  15 ---
 src/containers/map/layers/ObjectHoverLayer.js      |  37 ------
 src/containers/map/layers/RoomHoverLayer.js        |  50 --------
 .../sidebars/elements/LoadBarContainer.js          |  25 ----
 .../sidebars/elements/LoadChartContainer.js        |  27 -----
 .../simulation/ExperimentMetadataContainer.js      |  29 -----
 .../sidebars/simulation/LoadMetricContainer.js     |  14 ---
 .../sidebars/simulation/TaskContainer.js           |  23 ----
 .../sidebars/simulation/TraceContainer.js          |  22 ----
 .../sidebars/topology/TopologySidebar.js           |  14 ---
 .../topology/building/BuildingSidebarContainer.js  |  14 ---
 .../building/NewRoomConstructionContainer.js       |  28 -----
 .../topology/machine/BackToRackContainer.js        |  16 ---
 .../topology/machine/DeleteMachineContainer.js     |  16 ---
 .../topology/machine/MachineNameContainer.js       |  14 ---
 .../topology/machine/MachineSidebarContainer.js    |  16 ---
 .../sidebars/topology/machine/UnitAddContainer.js  |  22 ----
 .../sidebars/topology/machine/UnitContainer.js     |  23 ----
 .../sidebars/topology/machine/UnitListContainer.js |  16 ---
 .../sidebars/topology/machine/UnitTabsContainer.js |  14 ---
 .../sidebars/topology/rack/BackToRoomContainer.js  |  16 ---
 .../sidebars/topology/rack/DeleteRackContainer.js  |  16 ---
 .../sidebars/topology/rack/EmptySlotContainer.js   |  22 ----
 .../sidebars/topology/rack/MachineContainer.js     |  35 ------
 .../sidebars/topology/rack/MachineListContainer.js |  14 ---
 .../sidebars/topology/rack/RackNameContainer.js    |  22 ----
 .../sidebars/topology/rack/RackSidebarContainer.js |  15 ---
 .../topology/room/BackToBuildingContainer.js       |  16 ---
 .../sidebars/topology/room/DeleteRoomContainer.js  |  16 ---
 .../topology/room/RackConstructionContainer.js     |  23 ----
 .../sidebars/topology/room/RoomNameContainer.js    |  22 ----
 .../sidebars/topology/room/RoomSidebarContainer.js |  16 ---
 .../sidebars/topology/room/RoomTypeContainer.js    |  14 ---
 src/containers/timeline/PlayButtonContainer.js     |  23 ----
 src/containers/timeline/TimelineContainer.js       |  39 ------
 .../timeline/TimelineControlsContainer.js          |  34 ------
 src/containers/timeline/TimelineLabelsContainer.js |  15 ---
 src/pages/App.js                                   |  14 +--
 src/sagas/topology.js                              |   2 +-
 src/store/middlewares/viewport-adjustment.js       |   2 +-
 239 files changed, 2972 insertions(+), 2975 deletions(-)
 create mode 100644 src/components/app/map/LoadingScreen.js
 create mode 100644 src/components/app/map/MapConstants.js
 create mode 100644 src/components/app/map/MapStageComponent.js
 create mode 100644 src/components/app/map/controls/ExportCanvasComponent.js
 create mode 100644 src/components/app/map/controls/ScaleIndicatorComponent.js
 create mode 100644 src/components/app/map/controls/ScaleIndicatorComponent.sass
 create mode 100644 src/components/app/map/controls/ToolPanelComponent.js
 create mode 100644 src/components/app/map/controls/ToolPanelComponent.sass
 create mode 100644 src/components/app/map/controls/ZoomControlComponent.js
 create mode 100644 src/components/app/map/elements/Backdrop.js
 create mode 100644 src/components/app/map/elements/GrayLayer.js
 create mode 100644 src/components/app/map/elements/HoverTile.js
 create mode 100644 src/components/app/map/elements/ImageComponent.js
 create mode 100644 src/components/app/map/elements/RackFillBar.js
 create mode 100644 src/components/app/map/elements/RoomTile.js
 create mode 100644 src/components/app/map/elements/TileObject.js
 create mode 100644 src/components/app/map/elements/TilePlusIcon.js
 create mode 100644 src/components/app/map/elements/WallSegment.js
 create mode 100644 src/components/app/map/groups/DatacenterGroup.js
 create mode 100644 src/components/app/map/groups/GridGroup.js
 create mode 100644 src/components/app/map/groups/RackGroup.js
 create mode 100644 src/components/app/map/groups/RoomGroup.js
 create mode 100644 src/components/app/map/groups/TileGroup.js
 create mode 100644 src/components/app/map/groups/WallGroup.js
 create mode 100644 src/components/app/map/layers/HoverLayerComponent.js
 create mode 100644 src/components/app/map/layers/MapLayerComponent.js
 create mode 100644 src/components/app/map/layers/ObjectHoverLayerComponent.js
 create mode 100644 src/components/app/map/layers/RoomHoverLayerComponent.js
 create mode 100644 src/components/app/sidebars/Sidebar.js
 create mode 100644 src/components/app/sidebars/Sidebar.sass
 create mode 100644 src/components/app/sidebars/elements/LoadBarComponent.js
 create mode 100644 src/components/app/sidebars/elements/LoadChartComponent.js
 create mode 100644 src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
 create mode 100644 src/components/app/sidebars/simulation/LoadMetricComponent.js
 create mode 100644 src/components/app/sidebars/simulation/SimulationSidebarComponent.js
 create mode 100644 src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
 create mode 100644 src/components/app/sidebars/simulation/TaskComponent.js
 create mode 100644 src/components/app/sidebars/simulation/TraceComponent.js
 create mode 100644 src/components/app/sidebars/topology/NameComponent.js
 create mode 100644 src/components/app/sidebars/topology/TopologySidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/BackToRackComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/MachineNameComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/UnitAddComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/UnitComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/UnitListComponent.js
 create mode 100644 src/components/app/sidebars/topology/machine/UnitTabsComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/BackToRoomComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/DeleteRackComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/EmptySlotComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/MachineListComponent.sass
 create mode 100644 src/components/app/sidebars/topology/rack/RackNameComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
 create mode 100644 src/components/app/sidebars/topology/room/BackToBuildingComponent.js
 create mode 100644 src/components/app/sidebars/topology/room/DeleteRoomComponent.js
 create mode 100644 src/components/app/sidebars/topology/room/RackConstructionComponent.js
 create mode 100644 src/components/app/sidebars/topology/room/RoomNameComponent.js
 create mode 100644 src/components/app/sidebars/topology/room/RoomSidebarComponent.js
 create mode 100644 src/components/app/sidebars/topology/room/RoomTypeComponent.js
 create mode 100644 src/components/app/timeline/PlayButtonComponent.js
 create mode 100644 src/components/app/timeline/Timeline.sass
 create mode 100644 src/components/app/timeline/TimelineComponent.js
 create mode 100644 src/components/app/timeline/TimelineControlsComponent.js
 create mode 100644 src/components/app/timeline/TimelineLabelsComponent.js
 delete mode 100644 src/components/map/LoadingScreen.js
 delete mode 100644 src/components/map/MapConstants.js
 delete mode 100644 src/components/map/MapStageComponent.js
 delete mode 100644 src/components/map/controls/ExportCanvasComponent.js
 delete mode 100644 src/components/map/controls/ScaleIndicatorComponent.js
 delete mode 100644 src/components/map/controls/ScaleIndicatorComponent.sass
 delete mode 100644 src/components/map/controls/ToolPanelComponent.js
 delete mode 100644 src/components/map/controls/ToolPanelComponent.sass
 delete mode 100644 src/components/map/controls/ZoomControlComponent.js
 delete mode 100644 src/components/map/elements/Backdrop.js
 delete mode 100644 src/components/map/elements/GrayLayer.js
 delete mode 100644 src/components/map/elements/HoverTile.js
 delete mode 100644 src/components/map/elements/ImageComponent.js
 delete mode 100644 src/components/map/elements/RackFillBar.js
 delete mode 100644 src/components/map/elements/RoomTile.js
 delete mode 100644 src/components/map/elements/TileObject.js
 delete mode 100644 src/components/map/elements/TilePlusIcon.js
 delete mode 100644 src/components/map/elements/WallSegment.js
 delete mode 100644 src/components/map/groups/DatacenterGroup.js
 delete mode 100644 src/components/map/groups/GridGroup.js
 delete mode 100644 src/components/map/groups/RackGroup.js
 delete mode 100644 src/components/map/groups/RoomGroup.js
 delete mode 100644 src/components/map/groups/TileGroup.js
 delete mode 100644 src/components/map/groups/WallGroup.js
 delete mode 100644 src/components/map/layers/HoverLayerComponent.js
 delete mode 100644 src/components/map/layers/MapLayerComponent.js
 delete mode 100644 src/components/map/layers/ObjectHoverLayerComponent.js
 delete mode 100644 src/components/map/layers/RoomHoverLayerComponent.js
 delete mode 100644 src/components/sidebars/Sidebar.js
 delete mode 100644 src/components/sidebars/Sidebar.sass
 delete mode 100644 src/components/sidebars/elements/LoadBarComponent.js
 delete mode 100644 src/components/sidebars/elements/LoadChartComponent.js
 delete mode 100644 src/components/sidebars/simulation/ExperimentMetadataComponent.js
 delete mode 100644 src/components/sidebars/simulation/LoadMetricComponent.js
 delete mode 100644 src/components/sidebars/simulation/SimulationSidebarComponent.js
 delete mode 100644 src/components/sidebars/simulation/SimulationSidebarComponent.sass
 delete mode 100644 src/components/sidebars/simulation/TaskComponent.js
 delete mode 100644 src/components/sidebars/simulation/TraceComponent.js
 delete mode 100644 src/components/sidebars/topology/NameComponent.js
 delete mode 100644 src/components/sidebars/topology/TopologySidebarComponent.js
 delete mode 100644 src/components/sidebars/topology/building/BuildingSidebarComponent.js
 delete mode 100644 src/components/sidebars/topology/building/NewRoomConstructionComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/BackToRackComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/DeleteMachineComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/MachineNameComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/MachineSidebarComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/UnitAddComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/UnitComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/UnitListComponent.js
 delete mode 100644 src/components/sidebars/topology/machine/UnitTabsComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/BackToRoomComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/DeleteRackComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/EmptySlotComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/MachineComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/MachineListComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/MachineListComponent.sass
 delete mode 100644 src/components/sidebars/topology/rack/RackNameComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/RackSidebarComponent.js
 delete mode 100644 src/components/sidebars/topology/rack/RackSidebarComponent.sass
 delete mode 100644 src/components/sidebars/topology/room/BackToBuildingComponent.js
 delete mode 100644 src/components/sidebars/topology/room/DeleteRoomComponent.js
 delete mode 100644 src/components/sidebars/topology/room/RackConstructionComponent.js
 delete mode 100644 src/components/sidebars/topology/room/RoomNameComponent.js
 delete mode 100644 src/components/sidebars/topology/room/RoomSidebarComponent.js
 delete mode 100644 src/components/sidebars/topology/room/RoomTypeComponent.js
 delete mode 100644 src/components/timeline/PlayButtonComponent.js
 delete mode 100644 src/components/timeline/Timeline.sass
 delete mode 100644 src/components/timeline/TimelineComponent.js
 delete mode 100644 src/components/timeline/TimelineControlsComponent.js
 delete mode 100644 src/components/timeline/TimelineLabelsComponent.js
 create mode 100644 src/containers/app/map/DatacenterContainer.js
 create mode 100644 src/containers/app/map/GrayContainer.js
 create mode 100644 src/containers/app/map/MapStage.js
 create mode 100644 src/containers/app/map/RackContainer.js
 create mode 100644 src/containers/app/map/RackEnergyFillContainer.js
 create mode 100644 src/containers/app/map/RackSpaceFillContainer.js
 create mode 100644 src/containers/app/map/RoomContainer.js
 create mode 100644 src/containers/app/map/TileContainer.js
 create mode 100644 src/containers/app/map/WallContainer.js
 create mode 100644 src/containers/app/map/controls/ScaleIndicatorContainer.js
 create mode 100644 src/containers/app/map/controls/ZoomControlContainer.js
 create mode 100644 src/containers/app/map/layers/MapLayer.js
 create mode 100644 src/containers/app/map/layers/ObjectHoverLayer.js
 create mode 100644 src/containers/app/map/layers/RoomHoverLayer.js
 create mode 100644 src/containers/app/sidebars/elements/LoadBarContainer.js
 create mode 100644 src/containers/app/sidebars/elements/LoadChartContainer.js
 create mode 100644 src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js
 create mode 100644 src/containers/app/sidebars/simulation/LoadMetricContainer.js
 create mode 100644 src/containers/app/sidebars/simulation/TaskContainer.js
 create mode 100644 src/containers/app/sidebars/simulation/TraceContainer.js
 create mode 100644 src/containers/app/sidebars/topology/TopologySidebar.js
 create mode 100644 src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js
 create mode 100644 src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/BackToRackContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/MachineNameContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/UnitAddContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/UnitContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/UnitListContainer.js
 create mode 100644 src/containers/app/sidebars/topology/machine/UnitTabsContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/MachineContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/MachineListContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/RackNameContainer.js
 create mode 100644 src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/RackConstructionContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/RoomNameContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
 create mode 100644 src/containers/app/sidebars/topology/room/RoomTypeContainer.js
 create mode 100644 src/containers/app/timeline/PlayButtonContainer.js
 create mode 100644 src/containers/app/timeline/TimelineContainer.js
 create mode 100644 src/containers/app/timeline/TimelineControlsContainer.js
 create mode 100644 src/containers/app/timeline/TimelineLabelsContainer.js
 delete mode 100644 src/containers/map/DatacenterContainer.js
 delete mode 100644 src/containers/map/GrayContainer.js
 delete mode 100644 src/containers/map/MapStage.js
 delete mode 100644 src/containers/map/RackContainer.js
 delete mode 100644 src/containers/map/RackEnergyFillContainer.js
 delete mode 100644 src/containers/map/RackSpaceFillContainer.js
 delete mode 100644 src/containers/map/RoomContainer.js
 delete mode 100644 src/containers/map/TileContainer.js
 delete mode 100644 src/containers/map/WallContainer.js
 delete mode 100644 src/containers/map/controls/ScaleIndicatorContainer.js
 delete mode 100644 src/containers/map/controls/ZoomControlContainer.js
 delete mode 100644 src/containers/map/layers/MapLayer.js
 delete mode 100644 src/containers/map/layers/ObjectHoverLayer.js
 delete mode 100644 src/containers/map/layers/RoomHoverLayer.js
 delete mode 100644 src/containers/sidebars/elements/LoadBarContainer.js
 delete mode 100644 src/containers/sidebars/elements/LoadChartContainer.js
 delete mode 100644 src/containers/sidebars/simulation/ExperimentMetadataContainer.js
 delete mode 100644 src/containers/sidebars/simulation/LoadMetricContainer.js
 delete mode 100644 src/containers/sidebars/simulation/TaskContainer.js
 delete mode 100644 src/containers/sidebars/simulation/TraceContainer.js
 delete mode 100644 src/containers/sidebars/topology/TopologySidebar.js
 delete mode 100644 src/containers/sidebars/topology/building/BuildingSidebarContainer.js
 delete mode 100644 src/containers/sidebars/topology/building/NewRoomConstructionContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/BackToRackContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/DeleteMachineContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/MachineNameContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/MachineSidebarContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/UnitAddContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/UnitContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/UnitListContainer.js
 delete mode 100644 src/containers/sidebars/topology/machine/UnitTabsContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/BackToRoomContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/DeleteRackContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/EmptySlotContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/MachineContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/MachineListContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/RackNameContainer.js
 delete mode 100644 src/containers/sidebars/topology/rack/RackSidebarContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/BackToBuildingContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/DeleteRoomContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/RackConstructionContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/RoomNameContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/RoomSidebarContainer.js
 delete mode 100644 src/containers/sidebars/topology/room/RoomTypeContainer.js
 delete mode 100644 src/containers/timeline/PlayButtonContainer.js
 delete mode 100644 src/containers/timeline/TimelineContainer.js
 delete mode 100644 src/containers/timeline/TimelineControlsContainer.js
 delete mode 100644 src/containers/timeline/TimelineLabelsContainer.js

(limited to 'src')

diff --git a/src/components/app/map/LoadingScreen.js b/src/components/app/map/LoadingScreen.js
new file mode 100644
index 00000000..3d5753e2
--- /dev/null
+++ b/src/components/app/map/LoadingScreen.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import FontAwesome from "react-fontawesome";
+
+const LoadingScreen = () => (
+    <div className="display-4">
+        <FontAwesome name="refresh" className="mr-4" spin/>
+        Loading your datacenter...
+    </div>
+);
+
+export default LoadingScreen;
diff --git a/src/components/app/map/MapConstants.js b/src/components/app/map/MapConstants.js
new file mode 100644
index 00000000..a0166d15
--- /dev/null
+++ b/src/components/app/map/MapConstants.js
@@ -0,0 +1,28 @@
+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 / 8;
+export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12;
+export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
+
+export const SIDEBAR_WIDTH = 350;
+export const VIEWPORT_PADDING = 50;
+
+export const 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 = 4;
+export const DEFAULT_RACK_SLOT_CAPACITY = 42;
+export const DEFAULT_RACK_POWER_CAPACITY = 10000;
diff --git a/src/components/app/map/MapStageComponent.js b/src/components/app/map/MapStageComponent.js
new file mode 100644
index 00000000..271ae64f
--- /dev/null
+++ b/src/components/app/map/MapStageComponent.js
@@ -0,0 +1,135 @@
+import React from "react";
+import {Stage} from "react-konva";
+import {Shortcuts} from "react-shortcuts";
+import MapLayer from "../../../containers/app/map/layers/MapLayer";
+import ObjectHoverLayer from "../../../containers/app/map/layers/ObjectHoverLayer";
+import RoomHoverLayer from "../../../containers/app/map/layers/RoomHoverLayer";
+import jQuery from "../../../util/jquery";
+import {NAVBAR_HEIGHT} from "../../navigation/Navbar";
+import {
+    MAP_MAX_SCALE,
+    MAP_MIN_SCALE,
+    MAP_MOVE_PIXELS_PER_EVENT,
+    MAP_SCALE_PER_EVENT,
+    MAP_SIZE_IN_PIXELS
+} from "./MapConstants";
+
+class MapStageComponent extends React.Component {
+    state = {
+        mouseX: 0,
+        mouseY: 0
+    };
+
+    constructor() {
+        super();
+
+        this.updateDimensions = this.updateDimensions.bind(this);
+        this.updateScale = this.updateScale.bind(this);
+    }
+
+    componentWillMount() {
+        this.updateDimensions();
+    }
+
+    componentDidMount() {
+        window.addEventListener("resize", this.updateDimensions);
+        window.addEventListener("wheel", this.updateScale);
+
+        window["exportCanvasToImage"] = () => {
+            const canvasData = this.stage.getStage().toDataURL();
+            const newWindow = window.open('about:blank', 'OpenDC Canvas Export');
+            newWindow.document.write("<img src='" + canvasData + "' alt='Canvas Image Export'/>");
+            newWindow.document.title = "OpenDC Canvas Export";
+        }
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.updateDimensions);
+        window.removeEventListener("wheel", this.updateScale);
+    }
+
+    updateDimensions() {
+        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT);
+    }
+
+    updateScale(e) {
+        e.preventDefault();
+        const mousePointsTo = {
+            x: this.state.mouseX / this.props.mapScale - this.props.mapPosition.x / this.props.mapScale,
+            y: this.state.mouseY / this.props.mapScale - this.props.mapPosition.y / this.props.mapScale,
+        };
+        const newScale = e.deltaY < 0 ? this.props.mapScale * MAP_SCALE_PER_EVENT : this.props.mapScale / MAP_SCALE_PER_EVENT;
+        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
+
+        const newX = -(mousePointsTo.x - this.state.mouseX / boundedScale) * boundedScale;
+        const newY = -(mousePointsTo.y - this.state.mouseY / boundedScale) * boundedScale;
+
+        this.setPositionWithBoundsCheck(newX, newY);
+        this.props.setMapScale(boundedScale);
+    }
+
+    updateMousePosition() {
+        const mousePos = this.stage.getStage().getPointerPosition();
+        this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
+    }
+
+    handleShortcuts(action) {
+        switch (action) {
+            case "MOVE_LEFT":
+                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0);
+                break;
+            case "MOVE_RIGHT":
+                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0);
+                break;
+            case "MOVE_UP":
+                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT);
+                break;
+            case "MOVE_DOWN":
+                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT);
+                break;
+            default:
+                break;
+        }
+    }
+
+    moveWithDelta(deltaX, deltaY) {
+        this.setPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY);
+    }
+
+    setPositionWithBoundsCheck(newX, newY) {
+        const scaledMapSize = MAP_SIZE_IN_PIXELS * this.props.mapScale;
+        const updatedX = newX > 0 ? 0 :
+            (newX < -scaledMapSize + this.props.mapDimensions.width
+                ? -scaledMapSize + this.props.mapDimensions.width : newX);
+        const updatedY = newY > 0 ? 0 :
+            (newY < -scaledMapSize + this.props.mapDimensions.height
+                ? -scaledMapSize + this.props.mapDimensions.height : newY);
+
+        this.props.setMapPosition(updatedX, updatedY);
+    }
+
+    render() {
+        return (
+            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
+                <Stage
+                    ref={(stage) => {this.stage = stage;}}
+                    width={this.props.mapDimensions.width}
+                    height={this.props.mapDimensions.height}
+                    onMouseMove={this.updateMousePosition.bind(this)}
+                >
+                    <MapLayer/>
+                    <RoomHoverLayer
+                        mouseX={this.state.mouseX}
+                        mouseY={this.state.mouseY}
+                    />
+                    <ObjectHoverLayer
+                        mouseX={this.state.mouseX}
+                        mouseY={this.state.mouseY}
+                    />
+                </Stage>
+            </Shortcuts>
+        )
+    }
+}
+
+export default MapStageComponent;
diff --git a/src/components/app/map/controls/ExportCanvasComponent.js b/src/components/app/map/controls/ExportCanvasComponent.js
new file mode 100644
index 00000000..2f044ffe
--- /dev/null
+++ b/src/components/app/map/controls/ExportCanvasComponent.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const ExportCanvasComponent = () => (
+    <button
+        className="btn btn-success btn-circle btn-sm"
+        title="Export Canvas to PNG Image"
+        onClick={() => window["exportCanvasToImage"]()}
+    >
+        <span className="fa fa-camera"/>
+    </button>
+);
+
+export default ExportCanvasComponent;
diff --git a/src/components/app/map/controls/ScaleIndicatorComponent.js b/src/components/app/map/controls/ScaleIndicatorComponent.js
new file mode 100644
index 00000000..fd9483b5
--- /dev/null
+++ b/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -0,0 +1,14 @@
+import React from "react";
+import {TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import "./ScaleIndicatorComponent.css";
+
+const ScaleIndicatorComponent = ({scale}) => (
+    <div
+        className="scale-indicator"
+        style={{width: TILE_SIZE_IN_PIXELS * scale}}
+    >
+        {TILE_SIZE_IN_METERS}m
+    </div>
+);
+
+export default ScaleIndicatorComponent;
diff --git a/src/components/app/map/controls/ScaleIndicatorComponent.sass b/src/components/app/map/controls/ScaleIndicatorComponent.sass
new file mode 100644
index 00000000..f2d2b55b
--- /dev/null
+++ b/src/components/app/map/controls/ScaleIndicatorComponent.sass
@@ -0,0 +1,9 @@
+.scale-indicator
+  position: absolute
+  right: 10px
+  bottom: 10px
+  z-index: 50
+
+  border: solid 2px #212529
+  border-top: none
+  border-left: none
diff --git a/src/components/app/map/controls/ToolPanelComponent.js b/src/components/app/map/controls/ToolPanelComponent.js
new file mode 100644
index 00000000..a065358a
--- /dev/null
+++ b/src/components/app/map/controls/ToolPanelComponent.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ZoomControlContainer from "../../../../containers/app/map/controls/ZoomControlContainer";
+import ExportCanvasComponent from "./ExportCanvasComponent";
+import "./ToolPanelComponent.css";
+
+const ToolPanelComponent = () => (
+    <div className="tool-panel">
+        <ZoomControlContainer/>
+        <ExportCanvasComponent/>
+    </div>
+);
+
+export default ToolPanelComponent;
diff --git a/src/components/app/map/controls/ToolPanelComponent.sass b/src/components/app/map/controls/ToolPanelComponent.sass
new file mode 100644
index 00000000..996712b3
--- /dev/null
+++ b/src/components/app/map/controls/ToolPanelComponent.sass
@@ -0,0 +1,5 @@
+.tool-panel
+  position: absolute
+  left: 10px
+  bottom: 10px
+  z-index: 50
diff --git a/src/components/app/map/controls/ZoomControlComponent.js b/src/components/app/map/controls/ZoomControlComponent.js
new file mode 100644
index 00000000..c5628d16
--- /dev/null
+++ b/src/components/app/map/controls/ZoomControlComponent.js
@@ -0,0 +1,31 @@
+import React from "react";
+import {MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_SCALE_PER_EVENT} from "../MapConstants";
+
+const ZoomControlComponent = ({mapScale, setMapScale}) => {
+    const zoom = (out) => {
+        const newScale = out ? mapScale / MAP_SCALE_PER_EVENT : mapScale * MAP_SCALE_PER_EVENT;
+        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
+        setMapScale(boundedScale);
+    };
+
+    return (
+        <span>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom in"
+                onClick={() => zoom(false)}
+            >
+                <span className="fa fa-plus"/>
+            </button>
+            <button
+                className="btn btn-default btn-circle btn-sm mr-1"
+                title="Zoom out"
+                onClick={() => zoom(true)}
+            >
+                <span className="fa fa-minus"/>
+            </button>
+        </span>
+    );
+};
+
+export default ZoomControlComponent;
diff --git a/src/components/app/map/elements/Backdrop.js b/src/components/app/map/elements/Backdrop.js
new file mode 100644
index 00000000..9c01df63
--- /dev/null
+++ b/src/components/app/map/elements/Backdrop.js
@@ -0,0 +1,16 @@
+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/src/components/app/map/elements/GrayLayer.js b/src/components/app/map/elements/GrayLayer.js
new file mode 100644
index 00000000..c5994d06
--- /dev/null
+++ b/src/components/app/map/elements/GrayLayer.js
@@ -0,0 +1,17 @@
+import React from "react";
+import {Rect} from "react-konva";
+import {GRAYED_OUT_AREA_COLOR} from "../../../../util/colors";
+import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+
+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}
+    />
+);
+
+export default GrayLayer;
diff --git a/src/components/app/map/elements/HoverTile.js b/src/components/app/map/elements/HoverTile.js
new file mode 100644
index 00000000..fc12cbdd
--- /dev/null
+++ b/src/components/app/map/elements/HoverTile.js
@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Rect} from "react-konva";
+import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../../util/colors";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const HoverTile = ({pixelX, pixelY, isValid, scale, onClick}) => (
+    <Rect
+        x={pixelX}
+        y={pixelY}
+        scaleX={scale}
+        scaleY={scale}
+        width={TILE_SIZE_IN_PIXELS}
+        height={TILE_SIZE_IN_PIXELS}
+        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+        onClick={onClick}
+    />
+);
+
+HoverTile.propTypes = {
+    pixelX: PropTypes.number.isRequired,
+    pixelY: PropTypes.number.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default HoverTile;
diff --git a/src/components/app/map/elements/ImageComponent.js b/src/components/app/map/elements/ImageComponent.js
new file mode 100644
index 00000000..486296ea
--- /dev/null
+++ b/src/components/app/map/elements/ImageComponent.js
@@ -0,0 +1,48 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Image} from "react-konva";
+
+class ImageComponent extends React.Component {
+    static imageCaches = {};
+    static propTypes = {
+        src: PropTypes.string.isRequired,
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        opacity: PropTypes.number.isRequired,
+    };
+
+    state = {
+        image: null
+    };
+
+    componentDidMount() {
+        if (ImageComponent.imageCaches[this.props.src]) {
+            this.setState({image: ImageComponent.imageCaches[this.props.src]});
+            return;
+        }
+
+        const image = new window.Image();
+        image.src = this.props.src;
+        image.onload = () => {
+            this.setState({image});
+            ImageComponent.imageCaches[this.props.src] = image;
+        }
+    }
+
+    render() {
+        return (
+            <Image
+                image={this.state.image}
+                x={this.props.x}
+                y={this.props.y}
+                width={this.props.width}
+                height={this.props.height}
+                opacity={this.props.opacity}
+            />
+        )
+    }
+}
+
+export default ImageComponent;
diff --git a/src/components/app/map/elements/RackFillBar.js b/src/components/app/map/elements/RackFillBar.js
new file mode 100644
index 00000000..3a8a1137
--- /dev/null
+++ b/src/components/app/map/elements/RackFillBar.js
@@ -0,0 +1,67 @@
+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";
+
+const RackFillBar = ({positionX, positionY, type, fillFraction}) => {
+    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
+    const x = positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS
+        + (type === "space" ? halfOfObjectBorderWidth :
+            0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS));
+    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth;
+    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth;
+    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS;
+
+    const 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/src/components/app/map/elements/RoomTile.js b/src/components/app/map/elements/RoomTile.js
new file mode 100644
index 00000000..11948a7a
--- /dev/null
+++ b/src/components/app/map/elements/RoomTile.js
@@ -0,0 +1,20 @@
+import React from "react";
+import {Rect} from "react-konva";
+import Shapes from "../../../../shapes/index";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const RoomTile = ({tile, color}) => (
+    <Rect
+        x={tile.positionX * TILE_SIZE_IN_PIXELS}
+        y={tile.positionY * TILE_SIZE_IN_PIXELS}
+        width={TILE_SIZE_IN_PIXELS}
+        height={TILE_SIZE_IN_PIXELS}
+        fill={color}
+    />
+);
+
+RoomTile.propTypes = {
+    tile: Shapes.Tile,
+};
+
+export default RoomTile;
diff --git a/src/components/app/map/elements/TileObject.js b/src/components/app/map/elements/TileObject.js
new file mode 100644
index 00000000..73bfddba
--- /dev/null
+++ b/src/components/app/map/elements/TileObject.js
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Rect} from "react-konva";
+import {OBJECT_BORDER_COLOR} from "../../../../util/colors";
+import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+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/src/components/app/map/elements/TilePlusIcon.js b/src/components/app/map/elements/TilePlusIcon.js
new file mode 100644
index 00000000..b96bf0f5
--- /dev/null
+++ b/src/components/app/map/elements/TilePlusIcon.js
@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group, Line} from "react-konva";
+import {TILE_PLUS_COLOR} from "../../../../util/colors";
+import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
+    const linePoints = [
+        [
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+        ],
+        [
+            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+        ],
+    ];
+    return (
+        <Group>
+            {linePoints.map((points, index) => (
+                <Line
+                    key={index}
+                    points={points}
+                    lineCap="round"
+                    stroke={TILE_PLUS_COLOR}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+                    listening={false}
+                />
+            ))}
+        </Group>
+    )
+};
+
+TilePlusIcon.propTypes = {
+    pixelX: PropTypes.number,
+    pixelY: PropTypes.number,
+    mapScale: PropTypes.number,
+};
+
+export default TilePlusIcon;
diff --git a/src/components/app/map/elements/WallSegment.js b/src/components/app/map/elements/WallSegment.js
new file mode 100644
index 00000000..14efd3fc
--- /dev/null
+++ b/src/components/app/map/elements/WallSegment.js
@@ -0,0 +1,39 @@
+import React from "react";
+import {Line} from "react-konva";
+import Shapes from "../../../../shapes/index";
+import {WALL_COLOR} from "../../../../util/colors";
+import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants";
+
+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: Shapes.WallSegment,
+};
+
+export default WallSegment;
diff --git a/src/components/app/map/groups/DatacenterGroup.js b/src/components/app/map/groups/DatacenterGroup.js
new file mode 100644
index 00000000..1c978360
--- /dev/null
+++ b/src/components/app/map/groups/DatacenterGroup.js
@@ -0,0 +1,42 @@
+import React from "react";
+import {Group} from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import RoomContainer from "../../../../containers/app/map/RoomContainer";
+import Shapes from "../../../../shapes/index";
+
+const DatacenterGroup = ({datacenter, interactionLevel}) => {
+    if (!datacenter) {
+        return <Group/>;
+    }
+
+    if (interactionLevel.mode === "BUILDING") {
+        return (
+            <Group>
+                {datacenter.roomIds.map(roomId => (
+                    <RoomContainer key={roomId} roomId={roomId}/>
+                ))}
+            </Group>
+        );
+    }
+
+    return (
+        <Group>
+            {datacenter.roomIds
+                .filter(roomId => roomId !== interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
+            }
+            {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
+            {datacenter.roomIds
+                .filter(roomId => roomId === interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
+            }
+        </Group>
+    );
+};
+
+DatacenterGroup.propTypes = {
+    datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
+};
+
+export default DatacenterGroup;
diff --git a/src/components/app/map/groups/GridGroup.js b/src/components/app/map/groups/GridGroup.js
new file mode 100644
index 00000000..b3c6e1d5
--- /dev/null
+++ b/src/components/app/map/groups/GridGroup.js
@@ -0,0 +1,30 @@
+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/src/components/app/map/groups/RackGroup.js b/src/components/app/map/groups/RackGroup.js
new file mode 100644
index 00000000..233d0c20
--- /dev/null
+++ b/src/components/app/map/groups/RackGroup.js
@@ -0,0 +1,34 @@
+import React from "react";
+import {Group} from "react-konva";
+import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer";
+import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer";
+import Shapes from "../../../../shapes/index";
+import {RACK_BACKGROUND_COLOR} from "../../../../util/colors";
+import {convertLoadToSimulationColor} from "../../../../util/simulation-load";
+import TileObject from "../elements/TileObject";
+
+const RackGroup = ({tile, inSimulation, rackLoad}) => {
+    let color = RACK_BACKGROUND_COLOR;
+    if (inSimulation && rackLoad) {
+        color = convertLoadToSimulationColor(rackLoad);
+    }
+
+    return (
+        <Group>
+            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={color}/>
+            {inSimulation ?
+                undefined :
+                <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: Shapes.Tile,
+};
+
+export default RackGroup;
diff --git a/src/components/app/map/groups/RoomGroup.js b/src/components/app/map/groups/RoomGroup.js
new file mode 100644
index 00000000..18a6bd84
--- /dev/null
+++ b/src/components/app/map/groups/RoomGroup.js
@@ -0,0 +1,48 @@
+import React from "react";
+import {Group} from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import TileContainer from "../../../../containers/app/map/TileContainer";
+import WallContainer from "../../../../containers/app/map/WallContainer";
+import Shapes from "../../../../shapes/index";
+
+const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) => {
+    if (currentRoomInConstruction === room.id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tileIds.map(tileId => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                ))}
+            </Group>
+        );
+    }
+
+    return (
+        <Group onClick={onClick}>
+            {(() => {
+                if ((interactionLevel.mode === "RACK" || interactionLevel.mode === "MACHINE")
+                    && interactionLevel.roomId === room.id) {
+                    return [
+                        room.tileIds
+                            .filter(tileId => tileId !== interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+                        <GrayContainer key={-1}/>,
+                        room.tileIds
+                            .filter(tileId => tileId === interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
+                    ];
+                } else {
+                    return room.tileIds.map(tileId => (
+                        <TileContainer key={tileId} tileId={tileId}/>
+                    ));
+                }
+            })()}
+            <WallContainer roomId={room.id}/>
+        </Group>
+    );
+};
+
+RoomGroup.propTypes = {
+    room: Shapes.Room,
+};
+
+export default RoomGroup;
diff --git a/src/components/app/map/groups/TileGroup.js b/src/components/app/map/groups/TileGroup.js
new file mode 100644
index 00000000..c41e78a4
--- /dev/null
+++ b/src/components/app/map/groups/TileGroup.js
@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import RackContainer from "../../../../containers/app/map/RackContainer";
+import Shapes from "../../../../shapes/index";
+import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../../util/colors";
+import {convertLoadToSimulationColor} from "../../../../util/simulation-load";
+import RoomTile from "../elements/RoomTile";
+
+const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => {
+    let tileObject;
+    switch (tile.objectType) {
+        case "RACK":
+            tileObject = <RackContainer tile={tile}/>;
+            break;
+        default:
+            tileObject = null;
+    }
+
+    let color = ROOM_DEFAULT_COLOR;
+    if (newTile) {
+        color = ROOM_IN_CONSTRUCTION_COLOR;
+    } else if (inSimulation && roomLoad) {
+        color = convertLoadToSimulationColor(roomLoad);
+    }
+
+    return (
+        <Group
+            onClick={() => onClick(tile)}
+        >
+            <RoomTile tile={tile} color={color}/>
+            {tileObject}
+        </Group>
+    );
+};
+
+TileGroup.propTypes = {
+    tile: Shapes.Tile,
+    newTile: PropTypes.bool,
+};
+
+export default TileGroup;
diff --git a/src/components/app/map/groups/WallGroup.js b/src/components/app/map/groups/WallGroup.js
new file mode 100644
index 00000000..6de22523
--- /dev/null
+++ b/src/components/app/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import Shapes from "../../../../shapes/index";
+import {deriveWallLocations} from "../../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
+
+const WallGroup = ({tiles}) => {
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment}/>
+            ))}
+        </Group>
+    );
+};
+
+WallGroup.propTypes = {
+    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+};
+
+export default WallGroup;
diff --git a/src/components/app/map/layers/HoverLayerComponent.js b/src/components/app/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..aa2e8313
--- /dev/null
+++ b/src/components/app/map/layers/HoverLayerComponent.js
@@ -0,0 +1,63 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {Layer} from "react-konva";
+import HoverTile from "../elements/HoverTile";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+class HoverLayerComponent extends React.Component {
+    static propTypes = {
+        mouseX: PropTypes.number.isRequired,
+        mouseY: PropTypes.number.isRequired,
+        mapPosition: PropTypes.object.isRequired,
+        mapScale: PropTypes.number.isRequired,
+        isEnabled: PropTypes.func.isRequired,
+        onClick: PropTypes.func.isRequired,
+    };
+
+    state = {
+        positionX: -1,
+        positionY: -1,
+        validity: false,
+    };
+
+    componentDidUpdate() {
+        if (!this.props.isEnabled()) {
+            return;
+        }
+
+        const positionX = Math.floor((this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
+        const positionY = Math.floor((this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
+
+        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
+            this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
+        }
+    }
+
+    render() {
+        if (!this.props.isEnabled()) {
+            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;
+
+        return (
+            <Layer opacity={0.6}>
+                <HoverTile
+                    pixelX={pixelX}
+                    pixelY={pixelY}
+                    scale={this.props.mapScale}
+                    isValid={this.state.validity}
+                    onClick={() => this.state.validity ?
+                        this.props.onClick(this.state.positionX, this.state.positionY) : undefined}
+                />
+                {this.props.children ?
+                    React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.mapScale}) :
+                    undefined
+                }
+            </Layer>
+        );
+    }
+}
+
+export default HoverLayerComponent;
diff --git a/src/components/app/map/layers/MapLayerComponent.js b/src/components/app/map/layers/MapLayerComponent.js
new file mode 100644
index 00000000..c969249c
--- /dev/null
+++ b/src/components/app/map/layers/MapLayerComponent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Group, Layer} from "react-konva";
+import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer";
+import Backdrop from "../elements/Backdrop";
+import GridGroup from "../groups/GridGroup";
+
+const MapLayerComponent = ({mapPosition, mapScale}) => (
+    <Layer>
+        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+            <Backdrop/>
+            <DatacenterContainer/>
+            <GridGroup/>
+        </Group>
+    </Layer>
+);
+
+export default MapLayerComponent;
diff --git a/src/components/app/map/layers/ObjectHoverLayerComponent.js b/src/components/app/map/layers/ObjectHoverLayerComponent.js
new file mode 100644
index 00000000..aa79f8c3
--- /dev/null
+++ b/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import TilePlusIcon from "../elements/TilePlusIcon";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const ObjectHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}>
+        <TilePlusIcon {...props}/>
+    </HoverLayerComponent>
+);
+
+export default ObjectHoverLayerComponent;
diff --git a/src/components/app/map/layers/RoomHoverLayerComponent.js b/src/components/app/map/layers/RoomHoverLayerComponent.js
new file mode 100644
index 00000000..2133c8d8
--- /dev/null
+++ b/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const RoomHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}/>
+);
+
+export default RoomHoverLayerComponent;
diff --git a/src/components/app/sidebars/Sidebar.js b/src/components/app/sidebars/Sidebar.js
new file mode 100644
index 00000000..00e3607a
--- /dev/null
+++ b/src/components/app/sidebars/Sidebar.js
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+import "./Sidebar.css";
+
+class Sidebar extends React.Component {
+    state = {
+        collapsed: false
+    };
+
+    render() {
+        const collapseButton = (
+            <div
+                className={classNames("sidebar-collapse-button", {"sidebar-collapse-button-right": this.props.isRight})}
+                onClick={() => this.setState({collapsed: !this.state.collapsed})}
+            >
+                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ?
+                    <span className="fa fa-angle-left" title={this.props.isRight ? "Expand" : "Collapse"}/> :
+                    <span className="fa fa-angle-right" title={this.props.isRight ? "Collapse" : "Expand"}/>
+                }
+            </div>
+        );
+
+        if (this.state.collapsed) {
+            return collapseButton;
+        }
+        return (
+            <div
+                className={classNames("sidebar p-3 h-100", {"sidebar-right": this.props.isRight})}
+                onWheel={e => e.stopPropagation()}
+            >
+                {this.props.children}
+                {collapseButton}
+            </div>
+        );
+    }
+}
+
+export default Sidebar;
diff --git a/src/components/app/sidebars/Sidebar.sass b/src/components/app/sidebars/Sidebar.sass
new file mode 100644
index 00000000..4d0e5f1e
--- /dev/null
+++ b/src/components/app/sidebars/Sidebar.sass
@@ -0,0 +1,50 @@
+@import ../../../style-globals/_variables.sass
+@import ../../../style-globals/_mixins.sass
+
+.sidebar-collapse-button
+  position: absolute
+  left: 5px
+  top: 5px
+  padding: 5px 7px
+
+  background: white
+  border: solid 1px $gray-semi-light
+  z-index: 99
+
+  +clickable
+  +border-radius(5px)
+  +transition(background, 200ms)
+
+  &.sidebar-collapse-button-right
+    left: auto
+    right: 5px
+    top: 5px
+
+  &:hover
+    background: #eeeeee
+
+.sidebar
+  position: absolute
+  top: 0
+  left: 0
+  width: 350px
+
+  z-index: 100
+  background: white
+
+  border-right: $gray-semi-dark 1px solid
+
+  .sidebar-collapse-button
+    left: auto
+    right: -25px
+
+.sidebar-right
+  left: auto
+  right: 0
+
+  border-left: $gray-semi-dark 1px solid
+  border-right: none
+
+  .sidebar-collapse-button-right
+    left: -25px
+    right: auto
diff --git a/src/components/app/sidebars/elements/LoadBarComponent.js b/src/components/app/sidebars/elements/LoadBarComponent.js
new file mode 100644
index 00000000..65f94b3d
--- /dev/null
+++ b/src/components/app/sidebars/elements/LoadBarComponent.js
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+import React from "react";
+
+const LoadBarComponent = ({percent, disabled}) => (
+    <div className="mt-1">
+        <strong>Current load</strong>
+        <div className={classNames("progress", {disabled})}>
+            <div
+                className="progress-bar"
+                role="progressbar"
+                aria-valuenow={percent}
+                aria-valuemin="0"
+                aria-valuemax="100"
+                style={{width: percent + "%"}}
+            >
+                {percent}%
+            </div>
+        </div>
+    </div>
+);
+
+export default LoadBarComponent;
diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
new file mode 100644
index 00000000..19d58f77
--- /dev/null
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -0,0 +1,40 @@
+import React from "react";
+import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
+import {convertSecondsToFormattedTime} from "../../../../util/date-time";
+
+const LoadChartComponent = ({data, currentTick}) => (
+    <div className="mt-1">
+        <strong>Load over time</strong>
+        <VictoryChart
+            height={250}
+            padding={{top: 10, bottom: 50, left: 50, right: 50}}
+        >
+            <VictoryAxis
+                tickFormat={tick => convertSecondsToFormattedTime(tick)}
+                fixLabelOverlap={true}
+                label="Simulated Time"
+            />
+            <VictoryAxis
+                dependentAxis
+                label="Load"
+            />
+            <VictoryLine
+                data={data}
+            />
+            <VictoryScatter
+                data={data}
+            />
+            <VictoryLine
+                data={[
+                    {x: currentTick + 1, y: 0},
+                    {x: currentTick + 1, y: 1},
+                ]}
+                style={{
+                    data: {stroke: "#00A6D6", strokeWidth: 3}
+                }}
+            />
+        </VictoryChart>
+    </div>
+);
+
+export default LoadChartComponent;
diff --git a/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
new file mode 100644
index 00000000..3649045b
--- /dev/null
+++ b/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => (
+    <div>
+        <h2>{experimentName}</h2>
+        <p>Path: <strong>{pathName}</strong></p>
+        <p>Trace: <strong>{traceName}</strong></p>
+        <p>Scheduler: <strong>{schedulerName}</strong></p>
+    </div>
+);
+
+export default ExperimentMetadataComponent;
diff --git a/src/components/app/sidebars/simulation/LoadMetricComponent.js b/src/components/app/sidebars/simulation/LoadMetricComponent.js
new file mode 100644
index 00000000..e72e6b67
--- /dev/null
+++ b/src/components/app/sidebars/simulation/LoadMetricComponent.js
@@ -0,0 +1,33 @@
+import React from "react";
+import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../../../../util/colors";
+import {LOAD_NAME_MAP} from "../../../../util/simulation-load";
+
+const LoadMetricComponent = ({loadMetric}) => (
+    <div>
+        <div>Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong></div>
+        <div className="btn-group mb-2" style={{display: "flex"}}>
+            <span
+                className="btn btn-secondary"
+                style={{backgroundColor: SIM_LOW_COLOR, flex: 1}}
+                title="0-25%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{backgroundColor: SIM_MID_LOW_COLOR, flex: 1}}
+                title="25-50%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{backgroundColor: SIM_MID_HIGH_COLOR, flex: 1}}
+                title="50-75%"
+            />
+            <span
+                className="btn btn-secondary"
+                style={{backgroundColor: SIM_HIGH_COLOR, flex: 1}}
+                title="75-100%"
+            />
+        </div>
+    </div>
+);
+
+export default LoadMetricComponent;
diff --git a/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
new file mode 100644
index 00000000..92651dfc
--- /dev/null
+++ b/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
@@ -0,0 +1,22 @@
+import React from "react";
+import ExperimentMetadataContainer from "../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer";
+import LoadMetricContainer from "../../../../containers/app/sidebars/simulation/LoadMetricContainer";
+import TraceContainer from "../../../../containers/app/sidebars/simulation/TraceContainer";
+import Sidebar from "../Sidebar";
+import "./SimulationSidebarComponent.css";
+
+const SimulationSidebarComponent = () => {
+    return (
+        <Sidebar isRight={false}>
+            <div className="simulation-sidebar-container flex-column">
+                <ExperimentMetadataContainer/>
+                <LoadMetricContainer/>
+                <div className="trace-container">
+                    <TraceContainer/>
+                </div>
+            </div>
+        </Sidebar>
+    );
+};
+
+export default SimulationSidebarComponent;
diff --git a/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
new file mode 100644
index 00000000..82af97fa
--- /dev/null
+++ b/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
@@ -0,0 +1,8 @@
+.simulation-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.trace-container
+  flex: 1
+  overflow-y: scroll
diff --git a/src/components/app/sidebars/simulation/TaskComponent.js b/src/components/app/sidebars/simulation/TaskComponent.js
new file mode 100644
index 00000000..f7f65817
--- /dev/null
+++ b/src/components/app/sidebars/simulation/TaskComponent.js
@@ -0,0 +1,42 @@
+import approx from "approximate-number";
+import React from "react";
+import {convertSecondsToFormattedTime} from "../../../../util/date-time";
+
+const TaskComponent = ({task, flopsLeft}) => {
+    let stateInfo;
+
+    if (flopsLeft === task.totalFlopCount) {
+        stateInfo = (
+            <div>
+                <span className="fa fa-hourglass-half mr-2"/>
+                Waiting
+            </div>
+        );
+    } else if (flopsLeft > 0) {
+        stateInfo = (
+            <div>
+                <span className="fa fa-refresh mr-2"/>
+                Running ({approx(task.totalFlopCount - flopsLeft)} / {approx(task.totalFlopCount)} FLOPS)
+            </div>
+        );
+    } else {
+        stateInfo = (
+            <div>
+                <span className="fa fa-check mr-2"/>
+                Completed
+            </div>
+        );
+    }
+
+    return (
+        <li className="list-group-item flex-column align-items-start">
+            <div className="d-flex w-100 justify-content-between">
+                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOPS</h5>
+                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
+            </div>
+            {stateInfo}
+        </li>
+    );
+};
+
+export default TaskComponent;
diff --git a/src/components/app/sidebars/simulation/TraceComponent.js b/src/components/app/sidebars/simulation/TraceComponent.js
new file mode 100644
index 00000000..b43a8cea
--- /dev/null
+++ b/src/components/app/sidebars/simulation/TraceComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import TaskContainer from "../../../../containers/app/sidebars/simulation/TaskContainer";
+
+const TraceComponent = ({jobs}) => (
+    <div>
+        <h3>Trace</h3>
+        {jobs.map(job => (
+            <div key={job.id}>
+                <h4>Job: {job.name}</h4>
+                <ul className="list-group">
+                    {job.taskIds.map(taskId => (
+                        <TaskContainer taskId={taskId} key={taskId}/>
+                    ))}
+                </ul>
+            </div>
+        ))}
+    </div>
+);
+
+export default TraceComponent;
diff --git a/src/components/app/sidebars/topology/NameComponent.js b/src/components/app/sidebars/topology/NameComponent.js
new file mode 100644
index 00000000..d663f4ae
--- /dev/null
+++ b/src/components/app/sidebars/topology/NameComponent.js
@@ -0,0 +1,13 @@
+import React from "react";
+import FontAwesome from "react-fontawesome";
+
+const NameComponent = ({name, onEdit}) => (
+    <h2>
+        {name}
+        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
+            <FontAwesome name="pencil"/>
+        </button>
+    </h2>
+);
+
+export default NameComponent;
diff --git a/src/components/app/sidebars/topology/TopologySidebarComponent.js b/src/components/app/sidebars/topology/TopologySidebarComponent.js
new file mode 100644
index 00000000..ff4260a9
--- /dev/null
+++ b/src/components/app/sidebars/topology/TopologySidebarComponent.js
@@ -0,0 +1,35 @@
+import React from "react";
+import BuildingSidebarContainer from "../../../../containers/app/sidebars/topology/building/BuildingSidebarContainer";
+import MachineSidebarContainer from "../../../../containers/app/sidebars/topology/machine/MachineSidebarContainer";
+import RackSidebarContainer from "../../../../containers/app/sidebars/topology/rack/RackSidebarContainer";
+import RoomSidebarContainer from "../../../../containers/app/sidebars/topology/room/RoomSidebarContainer";
+import Sidebar from "../Sidebar";
+
+const TopologySidebarComponent = ({interactionLevel}) => {
+    let sidebarContent;
+
+    switch (interactionLevel.mode) {
+        case "BUILDING":
+            sidebarContent = <BuildingSidebarContainer/>;
+            break;
+        case "ROOM":
+            sidebarContent = <RoomSidebarContainer/>;
+            break;
+        case "RACK":
+            sidebarContent = <RackSidebarContainer/>;
+            break;
+        case "MACHINE":
+            sidebarContent = <MachineSidebarContainer/>;
+            break;
+        default:
+            sidebarContent = "Missing Content";
+    }
+
+    return (
+        <Sidebar isRight={true}>
+            {sidebarContent}
+        </Sidebar>
+    );
+};
+
+export default TopologySidebarComponent;
diff --git a/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
new file mode 100644
index 00000000..2bf81a48
--- /dev/null
+++ b/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -0,0 +1,19 @@
+import React from "react";
+import NewRoomConstructionContainer from "../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer";
+
+const BuildingSidebarComponent = ({inSimulation}) => {
+    return (
+        <div>
+            <h2>Building</h2>
+            {inSimulation ?
+                <div className="alert alert-info">
+                    <span className="fa fa-info-circle mr-2"/>
+                    <strong>Click on individual rooms</strong> to see their stats!
+                </div> :
+                <NewRoomConstructionContainer/>
+            }
+        </div>
+    );
+};
+
+export default BuildingSidebarComponent;
diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..d89b0ac0
--- /dev/null
+++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => {
+    if (currentRoomInConstruction === -1) {
+        return (
+            <div className="btn btn-primary btn-block" onClick={onStart}>
+                <span className="fa fa-plus mr-2"/>
+                Construct a new room
+            </div>
+        );
+    }
+    return (
+        <div>
+            <div className="btn btn-primary btn-block" onClick={onFinish}>
+                <span className="fa fa-check mr-2"/>
+                Finalize new room
+            </div>
+            <div className="btn btn-default btn-block" onClick={onCancel}>
+                <span className="fa fa-times mr-2"/>
+                Cancel construction
+            </div>
+        </div>
+    );
+
+};
+
+export default NewRoomConstructionComponent;
diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
new file mode 100644
index 00000000..19e33904
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const BackToRackComponent = ({onClick}) => (
+    <div className="btn btn-secondary btn-block" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to rack
+    </div>
+);
+
+export default BackToRackComponent;
diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
new file mode 100644
index 00000000..7ba08352
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteMachineComponent = ({onClick}) => (
+    <div className="btn btn-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this machine
+    </div>
+);
+
+export default DeleteMachineComponent;
diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
new file mode 100644
index 00000000..321e350d
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const MachineNameComponent = ({position}) => (
+    <h2>Machine at slot {position}</h2>
+);
+
+export default MachineNameComponent;
diff --git a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
new file mode 100644
index 00000000..cf4db80e
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -0,0 +1,26 @@
+import React from "react";
+import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
+import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
+import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer";
+import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer";
+import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer";
+import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer";
+
+const MachineSidebarComponent = ({inSimulation, machineId}) => {
+    return (
+        <div>
+            <MachineNameContainer/>
+            <BackToRackContainer/>
+            {inSimulation ?
+                <div>
+                    <LoadBarContainer objectType="machine" objectId={machineId}/>
+                    <LoadChartContainer objectType="machine" objectId={machineId}/>
+                </div> :
+                <DeleteMachineContainer/>
+            }
+            <UnitTabsContainer/>
+        </div>
+    );
+};
+
+export default MachineSidebarComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
new file mode 100644
index 00000000..f16700df
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+class UnitAddComponent extends React.Component {
+    static propTypes = {
+        units: PropTypes.array.isRequired,
+        onAdd: PropTypes.func.isRequired,
+    };
+
+    render() {
+        return (
+            <div className="form-inline">
+                <div className="form-group w-100">
+                    <select
+                        className="form-control w-75 mr-1"
+                        ref={unitSelect => this.unitSelect = unitSelect}
+                    >
+                        {this.props.units.map(unit => (
+                            <option value={unit.id} key={unit.id}>
+                                {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        type="submit"
+                        className="btn btn-primary"
+                        onClick={() => this.props.onAdd(parseInt(this.unitSelect.value, 10))}
+                    >
+                        <span className="fa fa-plus mr-2"/>
+                        Add
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default UnitAddComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js
new file mode 100644
index 00000000..c734f508
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const UnitComponent = ({unit, onDelete, inSimulation}) => (
+    <li className="d-flex list-group-item justify-content-between align-items-center">
+        {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
+        {inSimulation ?
+            undefined :
+            <span className="btn btn-outline-danger" onClick={onDelete}>
+                <span className="fa fa-trash mr-2"/>
+                Delete
+            </span>
+        }
+    </li>
+);
+
+export default UnitComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js
new file mode 100644
index 00000000..683f6023
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer";
+
+const UnitListComponent = ({unitType, unitIds, inSimulation}) => (
+    <ul className="list-group mt-1">
+        {unitIds.length !== 0 ?
+            unitIds.map((unitId, index) => (
+                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index}/>
+            )) :
+            <div className="alert alert-info">
+                {inSimulation ?
+                    <strong>No units of this type in this machine</strong> :
+                    <span><strong>No units...</strong> Add some with the menu above!</span>
+                }
+            </div>
+        }
+    </ul>
+);
+
+export default UnitListComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..2113d6d8
--- /dev/null
+++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -0,0 +1,54 @@
+import React from "react";
+import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer";
+import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer";
+
+const UnitTabsComponent = ({inSimulation}) => (
+    <div>
+        <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
+            <li className="nav-item">
+                <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">CPU</a>
+            </li>
+            <li className="nav-item">
+                <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">GPU</a>
+            </li>
+            <li className="nav-item">
+                <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">Memory</a>
+            </li>
+            <li className="nav-item">
+                <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">Storage</a>
+            </li>
+        </ul>
+        <div className="tab-content">
+            <div className="tab-pane active" id="cpu-units" role="tabpanel">
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="cpu"/>
+                }
+                <UnitListContainer unitType="cpu"/>
+            </div>
+            <div className="tab-pane" id="gpu-units" role="tabpanel">
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="gpu"/>
+                }
+                <UnitListContainer unitType="gpu"/>
+            </div>
+            <div className="tab-pane" id="memory-units" role="tabpanel">
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="memory"/>
+                }
+                <UnitListContainer unitType="memory"/>
+            </div>
+            <div className="tab-pane" id="storage-units" role="tabpanel">
+                {inSimulation ?
+                    undefined :
+                    <UnitAddContainer unitType="storage"/>
+                }
+                <UnitListContainer unitType="storage"/>
+            </div>
+        </div>
+    </div>
+);
+
+export default UnitTabsComponent;
diff --git a/src/components/app/sidebars/topology/rack/BackToRoomComponent.js b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
new file mode 100644
index 00000000..267001c6
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/BackToRoomComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const BackToRoomComponent = ({onClick}) => (
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to room
+    </div>
+);
+
+export default BackToRoomComponent;
diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
new file mode 100644
index 00000000..b268bd72
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteRackComponent = ({onClick}) => (
+    <div className="btn btn-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this rack
+    </div>
+);
+
+export default DeleteRackComponent;
diff --git a/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
new file mode 100644
index 00000000..08665072
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
+    <li className="list-group-item d-flex justify-content-between align-items-center">
+        <span className="badge badge-default badge-info mr-1 disabled">
+            {position}
+        </span>
+        {inSimulation ?
+            <span className="badge badge-default badge-success">
+                Empty Slot
+            </span> :
+            <button className="btn btn-outline-primary" onClick={onAdd}>
+                <span className="fa fa-plus mr-2"/>
+                Add machine
+            </button>
+        }
+    </li>
+);
+
+export default EmptySlotComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineComponent.js b/src/components/app/sidebars/topology/rack/MachineComponent.js
new file mode 100644
index 00000000..545bb916
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -0,0 +1,65 @@
+import React from "react";
+import Shapes from "../../../../../shapes";
+import {convertLoadToSimulationColor} from "../../../../../util/simulation-load";
+
+const UnitIcon = ({id, type}) => (
+    <div>
+        <img
+            src={"/img/topology/" + id + "-icon.png"}
+            alt={"Machine contains " + type + " units"}
+            className="img-fluid ml-1"
+            style={{maxHeight: "35px"}}
+        />
+    </div>
+);
+
+const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => {
+    let color = "white";
+    if (inSimulation && machineLoad) {
+        color = convertLoadToSimulationColor(machineLoad);
+    }
+    const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length
+        + machine.storageIds.length === 0;
+
+    return (
+        <li
+            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
+            onClick={onClick}
+            style={{backgroundColor: color}}
+        >
+            <span className="badge badge-default badge-info mr-1">
+                {position}
+            </span>
+            <div className="d-inline-flex">
+                {machine.cpuIds.length > 0 ?
+                    <UnitIcon id="cpu" type="CPU"/> :
+                    undefined
+                }
+                {machine.gpuIds.length > 0 ?
+                    <UnitIcon id="gpu" type="GPU"/> :
+                    undefined
+                }
+                {machine.memoryIds.length > 0 ?
+                    <UnitIcon id="memory" type="memory"/> :
+                    undefined
+                }
+                {machine.storageIds.length > 0 ?
+                    <UnitIcon id="storage" type="storage"/> :
+                    undefined
+                }
+                {hasNoUnits ?
+                    <span className="badge badge-default badge-warning">
+                        Machine with no units
+                    </span> :
+                    undefined
+                }
+            </div>
+        </li>
+    );
+};
+
+MachineComponent.propTypes = {
+    machine: Shapes.Machine
+};
+
+export default MachineComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.js b/src/components/app/sidebars/topology/rack/MachineListComponent.js
new file mode 100644
index 00000000..fcb90d66
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import EmptySlotContainer from "../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer";
+import MachineContainer from "../../../../../containers/app/sidebars/topology/rack/MachineContainer";
+import "./MachineListComponent.css";
+
+const MachineListComponent = ({machineIds}) => {
+    return (
+        <ul className="list-group machine-list">
+            {machineIds.map((machineId, index) => {
+                if (machineId === null) {
+                    return <EmptySlotContainer key={index} position={index + 1}/>;
+                } else {
+                    return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
+                }
+            })}
+        </ul>
+    );
+};
+
+export default MachineListComponent;
diff --git a/src/components/app/sidebars/topology/rack/MachineListComponent.sass b/src/components/app/sidebars/topology/rack/MachineListComponent.sass
new file mode 100644
index 00000000..bbcfe696
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/MachineListComponent.sass
@@ -0,0 +1,2 @@
+.machine-list li
+  min-height: 64px
diff --git a/src/components/app/sidebars/topology/rack/RackNameComponent.js b/src/components/app/sidebars/topology/rack/RackNameComponent.js
new file mode 100644
index 00000000..ee8d194b
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/RackNameComponent.js
@@ -0,0 +1,8 @@
+import React from "react";
+import NameComponent from "../NameComponent";
+
+const RackNameComponent = ({rackName, onEdit}) => (
+    <NameComponent name={rackName} onEdit={onEdit}/>
+);
+
+export default RackNameComponent;
diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
new file mode 100644
index 00000000..f563a52f
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -0,0 +1,33 @@
+import React from "react";
+import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
+import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
+import BackToRoomContainer from "../../../../../containers/app/sidebars/topology/rack/BackToRoomContainer";
+import DeleteRackContainer from "../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer";
+import MachineListContainer from "../../../../../containers/app/sidebars/topology/rack/MachineListContainer";
+import RackNameContainer from "../../../../../containers/app/sidebars/topology/rack/RackNameContainer";
+import "./RackSidebarComponent.css";
+
+const RackSidebarComponent = ({inSimulation, rackId}) => {
+    return (
+        <div className="rack-sidebar-container flex-column">
+            <div className="rack-sidebar-header-container">
+                <RackNameContainer/>
+                <BackToRoomContainer/>
+                {inSimulation ?
+                    <div>
+                        <LoadBarContainer objectType="rack" objectId={rackId}/>
+                        <LoadChartContainer objectType="rack" objectId={rackId}/>
+                    </div> :
+                    <div>
+                        <DeleteRackContainer/>
+                    </div>
+                }
+            </div>
+            <div className="machine-list-container mt-2">
+                <MachineListContainer/>
+            </div>
+        </div>
+    );
+};
+
+export default RackSidebarComponent;
diff --git a/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
new file mode 100644
index 00000000..822804bc
--- /dev/null
+++ b/src/components/app/sidebars/topology/rack/RackSidebarComponent.sass
@@ -0,0 +1,11 @@
+.rack-sidebar-container
+  display: flex
+  height: 100%
+  max-height: 100%
+
+.rack-sidebar-header-container
+  flex: 0
+
+.machine-list-container
+  flex: 1
+  overflow-y: scroll
diff --git a/src/components/app/sidebars/topology/room/BackToBuildingComponent.js b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
new file mode 100644
index 00000000..81384ba5
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/BackToBuildingComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const BackToBuildingComponent = ({onClick}) => (
+    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
+        <span className="fa fa-angle-left mr-2"/>
+        Back to building
+    </div>
+);
+
+export default BackToBuildingComponent;
diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
new file mode 100644
index 00000000..3f41eac0
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const DeleteRoomComponent = ({onClick}) => (
+    <div className="btn btn-danger btn-block" onClick={onClick}>
+        <span className="fa fa-trash mr-2"/>
+        Delete this room
+    </div>
+);
+
+export default DeleteRoomComponent;
diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
new file mode 100644
index 00000000..9bfe28ce
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => {
+    if (inRackConstructionMode) {
+        return (
+            <div className="btn btn-primary btn-block" onClick={onStop}>
+                <span className="fa fa-times mr-2"/>
+                Stop rack construction
+            </div>
+        );
+    }
+
+    return (
+        <div className="btn btn-primary btn-block" onClick={onStart}>
+            <span className="fa fa-plus mr-2"/>
+            Start rack construction
+        </div>
+    );
+};
+
+export default RackConstructionComponent;
diff --git a/src/components/app/sidebars/topology/room/RoomNameComponent.js b/src/components/app/sidebars/topology/room/RoomNameComponent.js
new file mode 100644
index 00000000..4d3e41cc
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/RoomNameComponent.js
@@ -0,0 +1,8 @@
+import React from "react";
+import NameComponent from "../NameComponent";
+
+const RoomNameComponent = ({roomName, onEdit}) => (
+    <NameComponent name={roomName} onEdit={onEdit}/>
+);
+
+export default RoomNameComponent;
diff --git a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
new file mode 100644
index 00000000..53857408
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -0,0 +1,35 @@
+import React from "react";
+import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer";
+import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
+import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer";
+import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer";
+import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer";
+import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer";
+import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer";
+
+const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => {
+    let allowedObjects;
+    if (!inSimulation && roomType === "SERVER") {
+        allowedObjects = <RackConstructionContainer/>;
+    }
+
+    return (
+        <div>
+            <RoomNameContainer/>
+            <RoomTypeContainer/>
+            <BackToBuildingContainer/>
+            {inSimulation ?
+                <div>
+                    <LoadBarContainer objectType="room" objectId={roomId}/>
+                    <LoadChartContainer objectType="room" objectId={roomId}/>
+                </div> :
+                <div>
+                    {allowedObjects}
+                    <DeleteRoomContainer/>
+                </div>
+            }
+        </div>
+    );
+};
+
+export default RoomSidebarComponent;
diff --git a/src/components/app/sidebars/topology/room/RoomTypeComponent.js b/src/components/app/sidebars/topology/room/RoomTypeComponent.js
new file mode 100644
index 00000000..d42eefb6
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/RoomTypeComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+import {ROOM_TYPE_TO_NAME_MAP} from "../../../../../util/room-types";
+
+const RoomTypeComponent = ({roomType}) => (
+    <p className="lead">
+        {ROOM_TYPE_TO_NAME_MAP[roomType]}
+    </p>
+);
+
+export default RoomTypeComponent;
diff --git a/src/components/app/timeline/PlayButtonComponent.js b/src/components/app/timeline/PlayButtonComponent.js
new file mode 100644
index 00000000..6ec70cc3
--- /dev/null
+++ b/src/components/app/timeline/PlayButtonComponent.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const PlayButtonComponent = ({isPlaying, onPlay, onPause}) => (
+    <div className="play-btn" onClick={() => isPlaying ? onPause() : onPlay()}>
+        {isPlaying ?
+            <span className="fa fa-pause"/> :
+            <span className="fa fa-play"/>
+        }
+    </div>
+);
+
+export default PlayButtonComponent;
diff --git a/src/components/app/timeline/Timeline.sass b/src/components/app/timeline/Timeline.sass
new file mode 100644
index 00000000..5003e80d
--- /dev/null
+++ b/src/components/app/timeline/Timeline.sass
@@ -0,0 +1,112 @@
+@import ../../../style-globals/_variables.sass
+@import ../../../style-globals/_mixins.sass
+
+$container-size: 500px
+$play-btn-size: 40px
+$border-width: 1px
+$timeline-border: $border-width solid $gray-semi-dark
+
+.timeline-bar
+  display: block
+  position: absolute
+  left: 0
+  bottom: 20px
+  width: 100%
+  text-align: center
+  z-index: 2000
+
+  pointer-events: none
+
+.timeline-container
+  display: inline-block
+  margin: 0 auto
+  text-align: left
+
+  width: $container-size
+
+.timeline-labels
+  display: block
+  height: 25px
+  line-height: 25px
+
+  div
+    display: inline-block
+
+  .start-time-label
+    margin-left: $play-btn-size - $border-width
+    padding-left: 4px
+
+  .end-time-label
+    padding-right: 4px
+    float: right
+
+.timeline-controls
+  display: flex
+  border: $timeline-border
+  overflow: hidden
+
+  pointer-events: all
+
+  +border-radius($standard-border-radius)
+
+  .play-btn
+    width: $play-btn-size
+    height: $play-btn-size + $border-width
+    line-height: $play-btn-size + $border-width
+    text-align: center
+    float: left
+    margin-top: -$border-width
+
+    font-size: 16pt
+    background: #333
+    color: #eee
+
+    +transition(background, $transition-length)
+    +user-select
+    +clickable
+
+  .play-btn:hover
+    background: #656565
+
+  .play-btn:active
+    background: #000
+
+  .timeline
+    position: relative
+    flex: 1
+    height: $play-btn-size
+    line-height: $play-btn-size
+    float: right
+
+    background: $blue-light
+
+    z-index: 500
+
+    div
+      +transition(all, $transition-length)
+
+    .time-marker
+      position: absolute
+      top: 0
+      left: 0
+
+      width: 6px
+      height: 100%
+
+      background: $blue-very-dark
+
+      +border-radius(2px)
+
+      z-index: 503
+
+    .section-marker
+      position: absolute
+      top: 0
+      left: 0
+
+      width: 3px
+      height: 100%
+
+      background: #222222
+
+      z-index: 504
diff --git a/src/components/app/timeline/TimelineComponent.js b/src/components/app/timeline/TimelineComponent.js
new file mode 100644
index 00000000..950a25bd
--- /dev/null
+++ b/src/components/app/timeline/TimelineComponent.js
@@ -0,0 +1,37 @@
+import React from "react";
+import TimelineControlsContainer from "../../../containers/app/timeline/TimelineControlsContainer";
+import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLabelsContainer";
+import "./Timeline.css";
+
+class TimelineComponent extends React.Component {
+    componentDidMount() {
+        this.interval = setInterval(() => {
+            if (!this.props.isPlaying) {
+                return;
+            }
+
+            if (this.props.currentTick < this.props.lastSimulatedTick) {
+                this.props.incrementTick();
+            } else {
+                this.props.pauseSimulation();
+            }
+        }, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    render() {
+        return (
+            <div className="timeline-bar">
+                <div className="timeline-container">
+                    <TimelineLabelsContainer/>
+                    <TimelineControlsContainer/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default TimelineComponent;
diff --git a/src/components/app/timeline/TimelineControlsComponent.js b/src/components/app/timeline/TimelineControlsComponent.js
new file mode 100644
index 00000000..72fc4a60
--- /dev/null
+++ b/src/components/app/timeline/TimelineControlsComponent.js
@@ -0,0 +1,39 @@
+import React from "react";
+import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer";
+import {convertTickToPercentage} from "../../../util/timeline";
+
+class TimelineControlsComponent extends React.Component {
+    onTimelineClick(e) {
+        const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth;
+        const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1));
+        this.props.goToTick(tick);
+    }
+
+    render() {
+        return (
+            <div className="timeline-controls">
+                <PlayButtonContainer/>
+                <div
+                    className="timeline"
+                    ref={timeline => this.timeline = timeline}
+                    onClick={this.onTimelineClick.bind(this)}
+                >
+                    <div
+                        className="time-marker"
+                        style={{left: convertTickToPercentage(this.props.currentTick, this.props.lastSimulatedTick)}}
+                    />
+                    {this.props.sectionTicks.map(sectionTick => (
+                        <div
+                            key={sectionTick}
+                            className="section-marker"
+                            style={{left: convertTickToPercentage(sectionTick, this.props.lastSimulatedTick)}}
+                            title="Topology changes at this tick"
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default TimelineControlsComponent;
diff --git a/src/components/app/timeline/TimelineLabelsComponent.js b/src/components/app/timeline/TimelineLabelsComponent.js
new file mode 100644
index 00000000..e795691f
--- /dev/null
+++ b/src/components/app/timeline/TimelineLabelsComponent.js
@@ -0,0 +1,11 @@
+import React from "react";
+import {convertSecondsToFormattedTime} from "../../../util/date-time";
+
+const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => (
+    <div className="timeline-labels">
+        <div className="start-time-label">{convertSecondsToFormattedTime(currentTick)}</div>
+        <div className="end-time-label">{convertSecondsToFormattedTime(lastSimulatedTick)}</div>
+    </div>
+);
+
+export default TimelineLabelsComponent;
diff --git a/src/components/map/LoadingScreen.js b/src/components/map/LoadingScreen.js
deleted file mode 100644
index 3d5753e2..00000000
--- a/src/components/map/LoadingScreen.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import FontAwesome from "react-fontawesome";
-
-const LoadingScreen = () => (
-    <div className="display-4">
-        <FontAwesome name="refresh" className="mr-4" spin/>
-        Loading your datacenter...
-    </div>
-);
-
-export default LoadingScreen;
diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
deleted file mode 100644
index a0166d15..00000000
--- a/src/components/map/MapConstants.js
+++ /dev/null
@@ -1,28 +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 / 8;
-export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12;
-export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
-
-export const SIDEBAR_WIDTH = 350;
-export const VIEWPORT_PADDING = 50;
-
-export const 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 = 4;
-export const DEFAULT_RACK_SLOT_CAPACITY = 42;
-export const DEFAULT_RACK_POWER_CAPACITY = 10000;
diff --git a/src/components/map/MapStageComponent.js b/src/components/map/MapStageComponent.js
deleted file mode 100644
index d3c75da0..00000000
--- a/src/components/map/MapStageComponent.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from "react";
-import {Stage} from "react-konva";
-import {Shortcuts} from "react-shortcuts";
-import MapLayer from "../../containers/map/layers/MapLayer";
-import ObjectHoverLayer from "../../containers/map/layers/ObjectHoverLayer";
-import RoomHoverLayer from "../../containers/map/layers/RoomHoverLayer";
-import jQuery from "../../util/jquery";
-import {NAVBAR_HEIGHT} from "../navigation/Navbar";
-import {
-    MAP_MAX_SCALE,
-    MAP_MIN_SCALE,
-    MAP_MOVE_PIXELS_PER_EVENT,
-    MAP_SCALE_PER_EVENT,
-    MAP_SIZE_IN_PIXELS
-} from "./MapConstants";
-
-class MapStageComponent extends React.Component {
-    state = {
-        mouseX: 0,
-        mouseY: 0
-    };
-
-    constructor() {
-        super();
-
-        this.updateDimensions = this.updateDimensions.bind(this);
-        this.updateScale = this.updateScale.bind(this);
-    }
-
-    componentWillMount() {
-        this.updateDimensions();
-    }
-
-    componentDidMount() {
-        window.addEventListener("resize", this.updateDimensions);
-        window.addEventListener("wheel", this.updateScale);
-
-        window["exportCanvasToImage"] = () => {
-            const canvasData = this.stage.getStage().toDataURL();
-            const newWindow = window.open('about:blank', 'OpenDC Canvas Export');
-            newWindow.document.write("<img src='" + canvasData + "' alt='Canvas Image Export'/>");
-            newWindow.document.title = "OpenDC Canvas Export";
-        }
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener("resize", this.updateDimensions);
-        window.removeEventListener("wheel", this.updateScale);
-    }
-
-    updateDimensions() {
-        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT);
-    }
-
-    updateScale(e) {
-        e.preventDefault();
-        const mousePointsTo = {
-            x: this.state.mouseX / this.props.mapScale - this.props.mapPosition.x / this.props.mapScale,
-            y: this.state.mouseY / this.props.mapScale - this.props.mapPosition.y / this.props.mapScale,
-        };
-        const newScale = e.deltaY < 0 ? this.props.mapScale * MAP_SCALE_PER_EVENT : this.props.mapScale / MAP_SCALE_PER_EVENT;
-        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
-
-        const newX = -(mousePointsTo.x - this.state.mouseX / boundedScale) * boundedScale;
-        const newY = -(mousePointsTo.y - this.state.mouseY / boundedScale) * boundedScale;
-
-        this.setPositionWithBoundsCheck(newX, newY);
-        this.props.setMapScale(boundedScale);
-    }
-
-    updateMousePosition() {
-        const mousePos = this.stage.getStage().getPointerPosition();
-        this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
-    }
-
-    handleShortcuts(action) {
-        switch (action) {
-            case "MOVE_LEFT":
-                this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0);
-                break;
-            case "MOVE_RIGHT":
-                this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0);
-                break;
-            case "MOVE_UP":
-                this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT);
-                break;
-            case "MOVE_DOWN":
-                this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT);
-                break;
-            default:
-                break;
-        }
-    }
-
-    moveWithDelta(deltaX, deltaY) {
-        this.setPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY);
-    }
-
-    setPositionWithBoundsCheck(newX, newY) {
-        const scaledMapSize = MAP_SIZE_IN_PIXELS * this.props.mapScale;
-        const updatedX = newX > 0 ? 0 :
-            (newX < -scaledMapSize + this.props.mapDimensions.width
-                ? -scaledMapSize + this.props.mapDimensions.width : newX);
-        const updatedY = newY > 0 ? 0 :
-            (newY < -scaledMapSize + this.props.mapDimensions.height
-                ? -scaledMapSize + this.props.mapDimensions.height : newY);
-
-        this.props.setMapPosition(updatedX, updatedY);
-    }
-
-    render() {
-        return (
-            <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
-                <Stage
-                    ref={(stage) => {this.stage = stage;}}
-                    width={this.props.mapDimensions.width}
-                    height={this.props.mapDimensions.height}
-                    onMouseMove={this.updateMousePosition.bind(this)}
-                >
-                    <MapLayer/>
-                    <RoomHoverLayer
-                        mouseX={this.state.mouseX}
-                        mouseY={this.state.mouseY}
-                    />
-                    <ObjectHoverLayer
-                        mouseX={this.state.mouseX}
-                        mouseY={this.state.mouseY}
-                    />
-                </Stage>
-            </Shortcuts>
-        )
-    }
-}
-
-export default MapStageComponent;
diff --git a/src/components/map/controls/ExportCanvasComponent.js b/src/components/map/controls/ExportCanvasComponent.js
deleted file mode 100644
index 2f044ffe..00000000
--- a/src/components/map/controls/ExportCanvasComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-
-const ExportCanvasComponent = () => (
-    <button
-        className="btn btn-success btn-circle btn-sm"
-        title="Export Canvas to PNG Image"
-        onClick={() => window["exportCanvasToImage"]()}
-    >
-        <span className="fa fa-camera"/>
-    </button>
-);
-
-export default ExportCanvasComponent;
diff --git a/src/components/map/controls/ScaleIndicatorComponent.js b/src/components/map/controls/ScaleIndicatorComponent.js
deleted file mode 100644
index fd9483b5..00000000
--- a/src/components/map/controls/ScaleIndicatorComponent.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import {TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
-import "./ScaleIndicatorComponent.css";
-
-const ScaleIndicatorComponent = ({scale}) => (
-    <div
-        className="scale-indicator"
-        style={{width: TILE_SIZE_IN_PIXELS * scale}}
-    >
-        {TILE_SIZE_IN_METERS}m
-    </div>
-);
-
-export default ScaleIndicatorComponent;
diff --git a/src/components/map/controls/ScaleIndicatorComponent.sass b/src/components/map/controls/ScaleIndicatorComponent.sass
deleted file mode 100644
index f2d2b55b..00000000
--- a/src/components/map/controls/ScaleIndicatorComponent.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.scale-indicator
-  position: absolute
-  right: 10px
-  bottom: 10px
-  z-index: 50
-
-  border: solid 2px #212529
-  border-top: none
-  border-left: none
diff --git a/src/components/map/controls/ToolPanelComponent.js b/src/components/map/controls/ToolPanelComponent.js
deleted file mode 100644
index 19e9f0d9..00000000
--- a/src/components/map/controls/ToolPanelComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import ZoomControlContainer from "../../../containers/map/controls/ZoomControlContainer";
-import ExportCanvasComponent from "./ExportCanvasComponent";
-import "./ToolPanelComponent.css";
-
-const ToolPanelComponent = () => (
-    <div className="tool-panel">
-        <ZoomControlContainer/>
-        <ExportCanvasComponent/>
-    </div>
-);
-
-export default ToolPanelComponent;
diff --git a/src/components/map/controls/ToolPanelComponent.sass b/src/components/map/controls/ToolPanelComponent.sass
deleted file mode 100644
index 996712b3..00000000
--- a/src/components/map/controls/ToolPanelComponent.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.tool-panel
-  position: absolute
-  left: 10px
-  bottom: 10px
-  z-index: 50
diff --git a/src/components/map/controls/ZoomControlComponent.js b/src/components/map/controls/ZoomControlComponent.js
deleted file mode 100644
index c5628d16..00000000
--- a/src/components/map/controls/ZoomControlComponent.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import {MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_SCALE_PER_EVENT} from "../MapConstants";
-
-const ZoomControlComponent = ({mapScale, setMapScale}) => {
-    const zoom = (out) => {
-        const newScale = out ? mapScale / MAP_SCALE_PER_EVENT : mapScale * MAP_SCALE_PER_EVENT;
-        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
-        setMapScale(boundedScale);
-    };
-
-    return (
-        <span>
-            <button
-                className="btn btn-default btn-circle btn-sm mr-1"
-                title="Zoom in"
-                onClick={() => zoom(false)}
-            >
-                <span className="fa fa-plus"/>
-            </button>
-            <button
-                className="btn btn-default btn-circle btn-sm mr-1"
-                title="Zoom out"
-                onClick={() => zoom(true)}
-            >
-                <span className="fa fa-minus"/>
-            </button>
-        </span>
-    );
-};
-
-export default ZoomControlComponent;
diff --git a/src/components/map/elements/Backdrop.js b/src/components/map/elements/Backdrop.js
deleted file mode 100644
index 5022f747..00000000
--- a/src/components/map/elements/Backdrop.js
+++ /dev/null
@@ -1,16 +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/src/components/map/elements/GrayLayer.js b/src/components/map/elements/GrayLayer.js
deleted file mode 100644
index 0cd91df8..00000000
--- a/src/components/map/elements/GrayLayer.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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}
-    />
-);
-
-export default GrayLayer;
diff --git a/src/components/map/elements/HoverTile.js b/src/components/map/elements/HoverTile.js
deleted file mode 100644
index b967f2f9..00000000
--- a/src/components/map/elements/HoverTile.js
+++ /dev/null
@@ -1,27 +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 = ({pixelX, pixelY, isValid, scale, onClick}) => (
-    <Rect
-        x={pixelX}
-        y={pixelY}
-        scaleX={scale}
-        scaleY={scale}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-        onClick={onClick}
-    />
-);
-
-HoverTile.propTypes = {
-    pixelX: PropTypes.number.isRequired,
-    pixelY: PropTypes.number.isRequired,
-    isValid: PropTypes.bool.isRequired,
-    onClick: PropTypes.func.isRequired,
-};
-
-export default HoverTile;
diff --git a/src/components/map/elements/ImageComponent.js b/src/components/map/elements/ImageComponent.js
deleted file mode 100644
index 486296ea..00000000
--- a/src/components/map/elements/ImageComponent.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import {Image} from "react-konva";
-
-class ImageComponent extends React.Component {
-    static imageCaches = {};
-    static propTypes = {
-        src: PropTypes.string.isRequired,
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-        opacity: PropTypes.number.isRequired,
-    };
-
-    state = {
-        image: null
-    };
-
-    componentDidMount() {
-        if (ImageComponent.imageCaches[this.props.src]) {
-            this.setState({image: ImageComponent.imageCaches[this.props.src]});
-            return;
-        }
-
-        const image = new window.Image();
-        image.src = this.props.src;
-        image.onload = () => {
-            this.setState({image});
-            ImageComponent.imageCaches[this.props.src] = image;
-        }
-    }
-
-    render() {
-        return (
-            <Image
-                image={this.state.image}
-                x={this.props.x}
-                y={this.props.y}
-                width={this.props.width}
-                height={this.props.height}
-                opacity={this.props.opacity}
-            />
-        )
-    }
-}
-
-export default ImageComponent;
diff --git a/src/components/map/elements/RackFillBar.js b/src/components/map/elements/RackFillBar.js
deleted file mode 100644
index 5b36d442..00000000
--- a/src/components/map/elements/RackFillBar.js
+++ /dev/null
@@ -1,67 +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";
-
-const RackFillBar = ({positionX, positionY, type, fillFraction}) => {
-    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
-    const x = positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS
-        + (type === "space" ? halfOfObjectBorderWidth :
-            0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS));
-    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth;
-    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth;
-    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS;
-
-    const 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/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js
deleted file mode 100644
index 87dd2f03..00000000
--- a/src/components/map/elements/RoomTile.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import {Rect} from "react-konva";
-import Shapes from "../../../shapes/index";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
-
-const RoomTile = ({tile, color}) => (
-    <Rect
-        x={tile.positionX * TILE_SIZE_IN_PIXELS}
-        y={tile.positionY * TILE_SIZE_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={color}
-    />
-);
-
-RoomTile.propTypes = {
-    tile: Shapes.Tile,
-};
-
-export default RoomTile;
diff --git a/src/components/map/elements/TileObject.js b/src/components/map/elements/TileObject.js
deleted file mode 100644
index 252fcfc2..00000000
--- a/src/components/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/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
deleted file mode 100644
index 3283c3cd..00000000
--- a/src/components/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";
-
-const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
-    const linePoints = [
-        [
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-        ],
-        [
-            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
-        ],
-    ];
-    return (
-        <Group>
-            {linePoints.map((points, index) => (
-                <Line
-                    key={index}
-                    points={points}
-                    lineCap="round"
-                    stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
-                    listening={false}
-                />
-            ))}
-        </Group>
-    )
-};
-
-TilePlusIcon.propTypes = {
-    pixelX: PropTypes.number,
-    pixelY: PropTypes.number,
-    mapScale: PropTypes.number,
-};
-
-export default TilePlusIcon;
diff --git a/src/components/map/elements/WallSegment.js b/src/components/map/elements/WallSegment.js
deleted file mode 100644
index b029579b..00000000
--- a/src/components/map/elements/WallSegment.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import {Line} from "react-konva";
-import Shapes from "../../../shapes/index";
-import {WALL_COLOR} from "../../../util/colors";
-import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants";
-
-const WallSegment = ({wallSegment}) => {
-    let points;
-    if (wallSegment.isHorizontal) {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS
-        ];
-    } else {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-        ];
-    }
-
-    return (
-        <Line
-            points={points}
-            lineCap="round"
-            stroke={WALL_COLOR}
-            strokeWidth={WALL_WIDTH_IN_PIXELS}
-        />
-    )
-};
-
-WallSegment.propTypes = {
-    wallSegment: Shapes.WallSegment,
-};
-
-export default WallSegment;
diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
deleted file mode 100644
index 0830ac4e..00000000
--- a/src/components/map/groups/DatacenterGroup.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import {Group} from "react-konva";
-import GrayContainer from "../../../containers/map/GrayContainer";
-import RoomContainer from "../../../containers/map/RoomContainer";
-import Shapes from "../../../shapes/index";
-
-const DatacenterGroup = ({datacenter, interactionLevel}) => {
-    if (!datacenter) {
-        return <Group/>;
-    }
-
-    if (interactionLevel.mode === "BUILDING") {
-        return (
-            <Group>
-                {datacenter.roomIds.map(roomId => (
-                    <RoomContainer key={roomId} roomId={roomId}/>
-                ))}
-            </Group>
-        );
-    }
-
-    return (
-        <Group>
-            {datacenter.roomIds
-                .filter(roomId => roomId !== interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
-            }
-            {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
-            {datacenter.roomIds
-                .filter(roomId => roomId === interactionLevel.roomId)
-                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
-            }
-        </Group>
-    );
-};
-
-DatacenterGroup.propTypes = {
-    datacenter: Shapes.Datacenter,
-    interactionLevel: Shapes.InteractionLevel,
-};
-
-export default DatacenterGroup;
diff --git a/src/components/map/groups/GridGroup.js b/src/components/map/groups/GridGroup.js
deleted file mode 100644
index bd2a78c3..00000000
--- a/src/components/map/groups/GridGroup.js
+++ /dev/null
@@ -1,30 +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/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js
deleted file mode 100644
index 7bf8855e..00000000
--- a/src/components/map/groups/RackGroup.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import {Group} from "react-konva";
-import RackEnergyFillContainer from "../../../containers/map/RackEnergyFillContainer";
-import RackSpaceFillContainer from "../../../containers/map/RackSpaceFillContainer";
-import Shapes from "../../../shapes/index";
-import {RACK_BACKGROUND_COLOR} from "../../../util/colors";
-import {convertLoadToSimulationColor} from "../../../util/simulation-load";
-import TileObject from "../elements/TileObject";
-
-const RackGroup = ({tile, inSimulation, rackLoad}) => {
-    let color = RACK_BACKGROUND_COLOR;
-    if (inSimulation && rackLoad) {
-        color = convertLoadToSimulationColor(rackLoad);
-    }
-
-    return (
-        <Group>
-            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={color}/>
-            {inSimulation ?
-                undefined :
-                <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: Shapes.Tile,
-};
-
-export default RackGroup;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
deleted file mode 100644
index 7c8392aa..00000000
--- a/src/components/map/groups/RoomGroup.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import {Group} from "react-konva";
-import GrayContainer from "../../../containers/map/GrayContainer";
-import TileContainer from "../../../containers/map/TileContainer";
-import WallContainer from "../../../containers/map/WallContainer";
-import Shapes from "../../../shapes/index";
-
-const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) => {
-    if (currentRoomInConstruction === room.id) {
-        return (
-            <Group onClick={onClick}>
-                {room.tileIds.map(tileId => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
-                ))}
-            </Group>
-        );
-    }
-
-    return (
-        <Group onClick={onClick}>
-            {(() => {
-                if ((interactionLevel.mode === "RACK" || interactionLevel.mode === "MACHINE")
-                    && interactionLevel.roomId === room.id) {
-                    return [
-                        room.tileIds
-                            .filter(tileId => tileId !== interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
-                        <GrayContainer key={-1}/>,
-                        room.tileIds
-                            .filter(tileId => tileId === interactionLevel.tileId)
-                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
-                    ];
-                } else {
-                    return room.tileIds.map(tileId => (
-                        <TileContainer key={tileId} tileId={tileId}/>
-                    ));
-                }
-            })()}
-            <WallContainer roomId={room.id}/>
-        </Group>
-    );
-};
-
-RoomGroup.propTypes = {
-    room: Shapes.Room,
-};
-
-export default RoomGroup;
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
deleted file mode 100644
index b88867b3..00000000
--- a/src/components/map/groups/TileGroup.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import {Group} from "react-konva";
-import RackContainer from "../../../containers/map/RackContainer";
-import Shapes from "../../../shapes/index";
-import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../util/colors";
-import {convertLoadToSimulationColor} from "../../../util/simulation-load";
-import RoomTile from "../elements/RoomTile";
-
-const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => {
-    let tileObject;
-    switch (tile.objectType) {
-        case "RACK":
-            tileObject = <RackContainer tile={tile}/>;
-            break;
-        default:
-            tileObject = null;
-    }
-
-    let color = ROOM_DEFAULT_COLOR;
-    if (newTile) {
-        color = ROOM_IN_CONSTRUCTION_COLOR;
-    } else if (inSimulation && roomLoad) {
-        color = convertLoadToSimulationColor(roomLoad);
-    }
-
-    return (
-        <Group
-            onClick={() => onClick(tile)}
-        >
-            <RoomTile tile={tile} color={color}/>
-            {tileObject}
-        </Group>
-    );
-};
-
-TileGroup.propTypes = {
-    tile: Shapes.Tile,
-    newTile: PropTypes.bool,
-};
-
-export default TileGroup;
diff --git a/src/components/map/groups/WallGroup.js b/src/components/map/groups/WallGroup.js
deleted file mode 100644
index f21d91a5..00000000
--- a/src/components/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 Shapes from "../../../shapes/index";
-import {deriveWallLocations} from "../../../util/tile-calculations";
-import WallSegment from "../elements/WallSegment";
-
-const WallGroup = ({tiles}) => {
-    return (
-        <Group>
-            {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
-            ))}
-        </Group>
-    );
-};
-
-WallGroup.propTypes = {
-    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
-};
-
-export default WallGroup;
diff --git a/src/components/map/layers/HoverLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
deleted file mode 100644
index aa2e8313..00000000
--- a/src/components/map/layers/HoverLayerComponent.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import PropTypes from "prop-types";
-import React from 'react';
-import {Layer} from "react-konva";
-import HoverTile from "../elements/HoverTile";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
-
-class HoverLayerComponent extends React.Component {
-    static propTypes = {
-        mouseX: PropTypes.number.isRequired,
-        mouseY: PropTypes.number.isRequired,
-        mapPosition: PropTypes.object.isRequired,
-        mapScale: PropTypes.number.isRequired,
-        isEnabled: PropTypes.func.isRequired,
-        onClick: PropTypes.func.isRequired,
-    };
-
-    state = {
-        positionX: -1,
-        positionY: -1,
-        validity: false,
-    };
-
-    componentDidUpdate() {
-        if (!this.props.isEnabled()) {
-            return;
-        }
-
-        const positionX = Math.floor((this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
-        const positionY = Math.floor((this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
-
-        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
-            this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
-        }
-    }
-
-    render() {
-        if (!this.props.isEnabled()) {
-            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;
-
-        return (
-            <Layer opacity={0.6}>
-                <HoverTile
-                    pixelX={pixelX}
-                    pixelY={pixelY}
-                    scale={this.props.mapScale}
-                    isValid={this.state.validity}
-                    onClick={() => this.state.validity ?
-                        this.props.onClick(this.state.positionX, this.state.positionY) : undefined}
-                />
-                {this.props.children ?
-                    React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.mapScale}) :
-                    undefined
-                }
-            </Layer>
-        );
-    }
-}
-
-export default HoverLayerComponent;
diff --git a/src/components/map/layers/MapLayerComponent.js b/src/components/map/layers/MapLayerComponent.js
deleted file mode 100644
index 3476bbc9..00000000
--- a/src/components/map/layers/MapLayerComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import {Group, Layer} from "react-konva";
-import DatacenterContainer from "../../../containers/map/DatacenterContainer";
-import Backdrop from "../elements/Backdrop";
-import GridGroup from "../groups/GridGroup";
-
-const MapLayerComponent = ({mapPosition, mapScale}) => (
-    <Layer>
-        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
-            <Backdrop/>
-            <DatacenterContainer/>
-            <GridGroup/>
-        </Group>
-    </Layer>
-);
-
-export default MapLayerComponent;
diff --git a/src/components/map/layers/ObjectHoverLayerComponent.js b/src/components/map/layers/ObjectHoverLayerComponent.js
deleted file mode 100644
index aa79f8c3..00000000
--- a/src/components/map/layers/ObjectHoverLayerComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import TilePlusIcon from "../elements/TilePlusIcon";
-import HoverLayerComponent from "./HoverLayerComponent";
-
-const ObjectHoverLayerComponent = (props) => (
-    <HoverLayerComponent {...props}>
-        <TilePlusIcon {...props}/>
-    </HoverLayerComponent>
-);
-
-export default ObjectHoverLayerComponent;
diff --git a/src/components/map/layers/RoomHoverLayerComponent.js b/src/components/map/layers/RoomHoverLayerComponent.js
deleted file mode 100644
index 2133c8d8..00000000
--- a/src/components/map/layers/RoomHoverLayerComponent.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import HoverLayerComponent from "./HoverLayerComponent";
-
-const RoomHoverLayerComponent = (props) => (
-    <HoverLayerComponent {...props}/>
-);
-
-export default RoomHoverLayerComponent;
diff --git a/src/components/sidebars/Sidebar.js b/src/components/sidebars/Sidebar.js
deleted file mode 100644
index 00e3607a..00000000
--- a/src/components/sidebars/Sidebar.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-import "./Sidebar.css";
-
-class Sidebar extends React.Component {
-    state = {
-        collapsed: false
-    };
-
-    render() {
-        const collapseButton = (
-            <div
-                className={classNames("sidebar-collapse-button", {"sidebar-collapse-button-right": this.props.isRight})}
-                onClick={() => this.setState({collapsed: !this.state.collapsed})}
-            >
-                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ?
-                    <span className="fa fa-angle-left" title={this.props.isRight ? "Expand" : "Collapse"}/> :
-                    <span className="fa fa-angle-right" title={this.props.isRight ? "Collapse" : "Expand"}/>
-                }
-            </div>
-        );
-
-        if (this.state.collapsed) {
-            return collapseButton;
-        }
-        return (
-            <div
-                className={classNames("sidebar p-3 h-100", {"sidebar-right": this.props.isRight})}
-                onWheel={e => e.stopPropagation()}
-            >
-                {this.props.children}
-                {collapseButton}
-            </div>
-        );
-    }
-}
-
-export default Sidebar;
diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass
deleted file mode 100644
index b987ef07..00000000
--- a/src/components/sidebars/Sidebar.sass
+++ /dev/null
@@ -1,50 +0,0 @@
-@import ../../style-globals/_variables.sass
-@import ../../style-globals/_mixins.sass
-
-.sidebar-collapse-button
-  position: absolute
-  left: 5px
-  top: 5px
-  padding: 5px 7px
-
-  background: white
-  border: solid 1px $gray-semi-light
-  z-index: 99
-
-  +clickable
-  +border-radius(5px)
-  +transition(background, 200ms)
-
-  &.sidebar-collapse-button-right
-    left: auto
-    right: 5px
-    top: 5px
-
-  &:hover
-    background: #eeeeee
-
-.sidebar
-  position: absolute
-  top: 0
-  left: 0
-  width: 350px
-
-  z-index: 100
-  background: white
-
-  border-right: $gray-semi-dark 1px solid
-
-  .sidebar-collapse-button
-    left: auto
-    right: -25px
-
-.sidebar-right
-  left: auto
-  right: 0
-
-  border-left: $gray-semi-dark 1px solid
-  border-right: none
-
-  .sidebar-collapse-button-right
-    left: -25px
-    right: auto
diff --git a/src/components/sidebars/elements/LoadBarComponent.js b/src/components/sidebars/elements/LoadBarComponent.js
deleted file mode 100644
index 65f94b3d..00000000
--- a/src/components/sidebars/elements/LoadBarComponent.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-
-const LoadBarComponent = ({percent, disabled}) => (
-    <div className="mt-1">
-        <strong>Current load</strong>
-        <div className={classNames("progress", {disabled})}>
-            <div
-                className="progress-bar"
-                role="progressbar"
-                aria-valuenow={percent}
-                aria-valuemin="0"
-                aria-valuemax="100"
-                style={{width: percent + "%"}}
-            >
-                {percent}%
-            </div>
-        </div>
-    </div>
-);
-
-export default LoadBarComponent;
diff --git a/src/components/sidebars/elements/LoadChartComponent.js b/src/components/sidebars/elements/LoadChartComponent.js
deleted file mode 100644
index a4e14a24..00000000
--- a/src/components/sidebars/elements/LoadChartComponent.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import {VictoryAxis, VictoryChart, VictoryLine, VictoryScatter} from "victory";
-import {convertSecondsToFormattedTime} from "../../../util/date-time";
-
-const LoadChartComponent = ({data, currentTick}) => (
-    <div className="mt-1">
-        <strong>Load over time</strong>
-        <VictoryChart
-            height={250}
-            padding={{top: 10, bottom: 50, left: 50, right: 50}}
-        >
-            <VictoryAxis
-                tickFormat={tick => convertSecondsToFormattedTime(tick)}
-                fixLabelOverlap={true}
-                label="Simulated Time"
-            />
-            <VictoryAxis
-                dependentAxis
-                label="Load"
-            />
-            <VictoryLine
-                data={data}
-            />
-            <VictoryScatter
-                data={data}
-            />
-            <VictoryLine
-                data={[
-                    {x: currentTick + 1, y: 0},
-                    {x: currentTick + 1, y: 1},
-                ]}
-                style={{
-                    data: {stroke: "#00A6D6", strokeWidth: 3}
-                }}
-            />
-        </VictoryChart>
-    </div>
-);
-
-export default LoadChartComponent;
diff --git a/src/components/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
deleted file mode 100644
index 3649045b..00000000
--- a/src/components/sidebars/simulation/ExperimentMetadataComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => (
-    <div>
-        <h2>{experimentName}</h2>
-        <p>Path: <strong>{pathName}</strong></p>
-        <p>Trace: <strong>{traceName}</strong></p>
-        <p>Scheduler: <strong>{schedulerName}</strong></p>
-    </div>
-);
-
-export default ExperimentMetadataComponent;
diff --git a/src/components/sidebars/simulation/LoadMetricComponent.js b/src/components/sidebars/simulation/LoadMetricComponent.js
deleted file mode 100644
index d9a1ed71..00000000
--- a/src/components/sidebars/simulation/LoadMetricComponent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../../../util/colors";
-import {LOAD_NAME_MAP} from "../../../util/simulation-load";
-
-const LoadMetricComponent = ({loadMetric}) => (
-    <div>
-        <div>Colors represent <strong>{LOAD_NAME_MAP[loadMetric]}</strong></div>
-        <div className="btn-group mb-2" style={{display: "flex"}}>
-            <span
-                className="btn btn-secondary"
-                style={{backgroundColor: SIM_LOW_COLOR, flex: 1}}
-                title="0-25%"
-            />
-            <span
-                className="btn btn-secondary"
-                style={{backgroundColor: SIM_MID_LOW_COLOR, flex: 1}}
-                title="25-50%"
-            />
-            <span
-                className="btn btn-secondary"
-                style={{backgroundColor: SIM_MID_HIGH_COLOR, flex: 1}}
-                title="50-75%"
-            />
-            <span
-                className="btn btn-secondary"
-                style={{backgroundColor: SIM_HIGH_COLOR, flex: 1}}
-                title="75-100%"
-            />
-        </div>
-    </div>
-);
-
-export default LoadMetricComponent;
diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.js b/src/components/sidebars/simulation/SimulationSidebarComponent.js
deleted file mode 100644
index 5cb83c2c..00000000
--- a/src/components/sidebars/simulation/SimulationSidebarComponent.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import ExperimentMetadataContainer from "../../../containers/sidebars/simulation/ExperimentMetadataContainer";
-import LoadMetricContainer from "../../../containers/sidebars/simulation/LoadMetricContainer";
-import TraceContainer from "../../../containers/sidebars/simulation/TraceContainer";
-import Sidebar from "../Sidebar";
-import "./SimulationSidebarComponent.css";
-
-const SimulationSidebarComponent = () => {
-    return (
-        <Sidebar isRight={false}>
-            <div className="simulation-sidebar-container flex-column">
-                <ExperimentMetadataContainer/>
-                <LoadMetricContainer/>
-                <div className="trace-container">
-                    <TraceContainer/>
-                </div>
-            </div>
-        </Sidebar>
-    );
-};
-
-export default SimulationSidebarComponent;
diff --git a/src/components/sidebars/simulation/SimulationSidebarComponent.sass b/src/components/sidebars/simulation/SimulationSidebarComponent.sass
deleted file mode 100644
index 82af97fa..00000000
--- a/src/components/sidebars/simulation/SimulationSidebarComponent.sass
+++ /dev/null
@@ -1,8 +0,0 @@
-.simulation-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
-
-.trace-container
-  flex: 1
-  overflow-y: scroll
diff --git a/src/components/sidebars/simulation/TaskComponent.js b/src/components/sidebars/simulation/TaskComponent.js
deleted file mode 100644
index 03b6a279..00000000
--- a/src/components/sidebars/simulation/TaskComponent.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import approx from "approximate-number";
-import React from "react";
-import {convertSecondsToFormattedTime} from "../../../util/date-time";
-
-const TaskComponent = ({task, flopsLeft}) => {
-    let stateInfo;
-
-    if (flopsLeft === task.totalFlopCount) {
-        stateInfo = (
-            <div>
-                <span className="fa fa-hourglass-half mr-2"/>
-                Waiting
-            </div>
-        );
-    } else if (flopsLeft > 0) {
-        stateInfo = (
-            <div>
-                <span className="fa fa-refresh mr-2"/>
-                Running ({approx(task.totalFlopCount - flopsLeft)} / {approx(task.totalFlopCount)} FLOPS)
-            </div>
-        );
-    } else {
-        stateInfo = (
-            <div>
-                <span className="fa fa-check mr-2"/>
-                Completed
-            </div>
-        );
-    }
-
-    return (
-        <li className="list-group-item flex-column align-items-start">
-            <div className="d-flex w-100 justify-content-between">
-                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOPS</h5>
-                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
-            </div>
-            {stateInfo}
-        </li>
-    );
-};
-
-export default TaskComponent;
diff --git a/src/components/sidebars/simulation/TraceComponent.js b/src/components/sidebars/simulation/TraceComponent.js
deleted file mode 100644
index ffb470ba..00000000
--- a/src/components/sidebars/simulation/TraceComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import TaskContainer from "../../../containers/sidebars/simulation/TaskContainer";
-
-const TraceComponent = ({jobs}) => (
-    <div>
-        <h3>Trace</h3>
-        {jobs.map(job => (
-            <div key={job.id}>
-                <h4>Job: {job.name}</h4>
-                <ul className="list-group">
-                    {job.taskIds.map(taskId => (
-                        <TaskContainer taskId={taskId} key={taskId}/>
-                    ))}
-                </ul>
-            </div>
-        ))}
-    </div>
-);
-
-export default TraceComponent;
diff --git a/src/components/sidebars/topology/NameComponent.js b/src/components/sidebars/topology/NameComponent.js
deleted file mode 100644
index d663f4ae..00000000
--- a/src/components/sidebars/topology/NameComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import FontAwesome from "react-fontawesome";
-
-const NameComponent = ({name, onEdit}) => (
-    <h2>
-        {name}
-        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil"/>
-        </button>
-    </h2>
-);
-
-export default NameComponent;
diff --git a/src/components/sidebars/topology/TopologySidebarComponent.js b/src/components/sidebars/topology/TopologySidebarComponent.js
deleted file mode 100644
index b61c7e3c..00000000
--- a/src/components/sidebars/topology/TopologySidebarComponent.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import BuildingSidebarContainer from "../../../containers/sidebars/topology/building/BuildingSidebarContainer";
-import MachineSidebarContainer from "../../../containers/sidebars/topology/machine/MachineSidebarContainer";
-import RackSidebarContainer from "../../../containers/sidebars/topology/rack/RackSidebarContainer";
-import RoomSidebarContainer from "../../../containers/sidebars/topology/room/RoomSidebarContainer";
-import Sidebar from "../Sidebar";
-
-const TopologySidebarComponent = ({interactionLevel}) => {
-    let sidebarContent;
-
-    switch (interactionLevel.mode) {
-        case "BUILDING":
-            sidebarContent = <BuildingSidebarContainer/>;
-            break;
-        case "ROOM":
-            sidebarContent = <RoomSidebarContainer/>;
-            break;
-        case "RACK":
-            sidebarContent = <RackSidebarContainer/>;
-            break;
-        case "MACHINE":
-            sidebarContent = <MachineSidebarContainer/>;
-            break;
-        default:
-            sidebarContent = "Missing Content";
-    }
-
-    return (
-        <Sidebar isRight={true}>
-            {sidebarContent}
-        </Sidebar>
-    );
-};
-
-export default TopologySidebarComponent;
diff --git a/src/components/sidebars/topology/building/BuildingSidebarComponent.js b/src/components/sidebars/topology/building/BuildingSidebarComponent.js
deleted file mode 100644
index 835943f2..00000000
--- a/src/components/sidebars/topology/building/BuildingSidebarComponent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import NewRoomConstructionContainer from "../../../../containers/sidebars/topology/building/NewRoomConstructionContainer";
-
-const BuildingSidebarComponent = ({inSimulation}) => {
-    return (
-        <div>
-            <h2>Building</h2>
-            {inSimulation ?
-                undefined :
-                <NewRoomConstructionContainer/>
-            }
-        </div>
-    );
-};
-
-export default BuildingSidebarComponent;
diff --git a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
deleted file mode 100644
index d89b0ac0..00000000
--- a/src/components/sidebars/topology/building/NewRoomConstructionComponent.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-const NewRoomConstructionComponent = ({onStart, onFinish, onCancel, currentRoomInConstruction}) => {
-    if (currentRoomInConstruction === -1) {
-        return (
-            <div className="btn btn-primary btn-block" onClick={onStart}>
-                <span className="fa fa-plus mr-2"/>
-                Construct a new room
-            </div>
-        );
-    }
-    return (
-        <div>
-            <div className="btn btn-primary btn-block" onClick={onFinish}>
-                <span className="fa fa-check mr-2"/>
-                Finalize new room
-            </div>
-            <div className="btn btn-default btn-block" onClick={onCancel}>
-                <span className="fa fa-times mr-2"/>
-                Cancel construction
-            </div>
-        </div>
-    );
-
-};
-
-export default NewRoomConstructionComponent;
diff --git a/src/components/sidebars/topology/machine/BackToRackComponent.js b/src/components/sidebars/topology/machine/BackToRackComponent.js
deleted file mode 100644
index 19e33904..00000000
--- a/src/components/sidebars/topology/machine/BackToRackComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-const BackToRackComponent = ({onClick}) => (
-    <div className="btn btn-secondary btn-block" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
-        Back to rack
-    </div>
-);
-
-export default BackToRackComponent;
diff --git a/src/components/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/sidebars/topology/machine/DeleteMachineComponent.js
deleted file mode 100644
index 14713158..00000000
--- a/src/components/sidebars/topology/machine/DeleteMachineComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-const DeleteMachineComponent = ({onClick}) => {
-    return (
-        <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-2"/>
-            Delete this machine
-        </div>
-    );
-};
-
-export default DeleteMachineComponent;
diff --git a/src/components/sidebars/topology/machine/MachineNameComponent.js b/src/components/sidebars/topology/machine/MachineNameComponent.js
deleted file mode 100644
index 321e350d..00000000
--- a/src/components/sidebars/topology/machine/MachineNameComponent.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const MachineNameComponent = ({position}) => (
-    <h2>Machine at slot {position}</h2>
-);
-
-export default MachineNameComponent;
diff --git a/src/components/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/sidebars/topology/machine/MachineSidebarComponent.js
deleted file mode 100644
index e8009c34..00000000
--- a/src/components/sidebars/topology/machine/MachineSidebarComponent.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer";
-import BackToRackContainer from "../../../../containers/sidebars/topology/machine/BackToRackContainer";
-import DeleteMachineContainer from "../../../../containers/sidebars/topology/machine/DeleteMachineContainer";
-import MachineNameContainer from "../../../../containers/sidebars/topology/machine/MachineNameContainer";
-import UnitTabsContainer from "../../../../containers/sidebars/topology/machine/UnitTabsContainer";
-
-const MachineSidebarComponent = ({inSimulation, machineId}) => {
-    return (
-        <div>
-            <MachineNameContainer/>
-            <BackToRackContainer/>
-            {inSimulation ?
-                <div>
-                    <LoadBarContainer objectType="machine" objectId={machineId}/>
-                    <LoadChartContainer objectType="machine" objectId={machineId}/>
-                </div> :
-                <DeleteMachineContainer/>
-            }
-            <UnitTabsContainer/>
-        </div>
-    );
-};
-
-export default MachineSidebarComponent;
diff --git a/src/components/sidebars/topology/machine/UnitAddComponent.js b/src/components/sidebars/topology/machine/UnitAddComponent.js
deleted file mode 100644
index f16700df..00000000
--- a/src/components/sidebars/topology/machine/UnitAddComponent.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-
-class UnitAddComponent extends React.Component {
-    static propTypes = {
-        units: PropTypes.array.isRequired,
-        onAdd: PropTypes.func.isRequired,
-    };
-
-    render() {
-        return (
-            <div className="form-inline">
-                <div className="form-group w-100">
-                    <select
-                        className="form-control w-75 mr-1"
-                        ref={unitSelect => this.unitSelect = unitSelect}
-                    >
-                        {this.props.units.map(unit => (
-                            <option value={unit.id} key={unit.id}>
-                                {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
-                            </option>
-                        ))}
-                    </select>
-                    <button
-                        type="submit"
-                        className="btn btn-primary"
-                        onClick={() => this.props.onAdd(parseInt(this.unitSelect.value, 10))}
-                    >
-                        <span className="fa fa-plus mr-2"/>
-                        Add
-                    </button>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default UnitAddComponent;
diff --git a/src/components/sidebars/topology/machine/UnitComponent.js b/src/components/sidebars/topology/machine/UnitComponent.js
deleted file mode 100644
index c734f508..00000000
--- a/src/components/sidebars/topology/machine/UnitComponent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-const UnitComponent = ({unit, onDelete, inSimulation}) => (
-    <li className="d-flex list-group-item justify-content-between align-items-center">
-        {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
-        {inSimulation ?
-            undefined :
-            <span className="btn btn-outline-danger" onClick={onDelete}>
-                <span className="fa fa-trash mr-2"/>
-                Delete
-            </span>
-        }
-    </li>
-);
-
-export default UnitComponent;
diff --git a/src/components/sidebars/topology/machine/UnitListComponent.js b/src/components/sidebars/topology/machine/UnitListComponent.js
deleted file mode 100644
index 307edc0a..00000000
--- a/src/components/sidebars/topology/machine/UnitListComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import UnitContainer from "../../../../containers/sidebars/topology/machine/UnitContainer";
-
-const UnitListComponent = ({unitType, unitIds, inSimulation}) => (
-    <ul className="list-group mt-1">
-        {unitIds.length !== 0 ?
-            unitIds.map((unitId, index) => (
-                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index}/>
-            )) :
-            <div className="alert alert-info">
-                {inSimulation ?
-                    <strong>No units of this type in this machine</strong> :
-                    <span><strong>No units...</strong> Add some with the menu above!</span>
-                }
-            </div>
-        }
-    </ul>
-);
-
-export default UnitListComponent;
diff --git a/src/components/sidebars/topology/machine/UnitTabsComponent.js b/src/components/sidebars/topology/machine/UnitTabsComponent.js
deleted file mode 100644
index a7692ecf..00000000
--- a/src/components/sidebars/topology/machine/UnitTabsComponent.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import UnitAddContainer from "../../../../containers/sidebars/topology/machine/UnitAddContainer";
-import UnitListContainer from "../../../../containers/sidebars/topology/machine/UnitListContainer";
-
-const UnitTabsComponent = ({inSimulation}) => (
-    <div>
-        <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
-            <li className="nav-item">
-                <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">CPU</a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">GPU</a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">Memory</a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">Storage</a>
-            </li>
-        </ul>
-        <div className="tab-content">
-            <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                {inSimulation ?
-                    undefined :
-                    <UnitAddContainer unitType="cpu"/>
-                }
-                <UnitListContainer unitType="cpu"/>
-            </div>
-            <div className="tab-pane" id="gpu-units" role="tabpanel">
-                {inSimulation ?
-                    undefined :
-                    <UnitAddContainer unitType="gpu"/>
-                }
-                <UnitListContainer unitType="gpu"/>
-            </div>
-            <div className="tab-pane" id="memory-units" role="tabpanel">
-                {inSimulation ?
-                    undefined :
-                    <UnitAddContainer unitType="memory"/>
-                }
-                <UnitListContainer unitType="memory"/>
-            </div>
-            <div className="tab-pane" id="storage-units" role="tabpanel">
-                {inSimulation ?
-                    undefined :
-                    <UnitAddContainer unitType="storage"/>
-                }
-                <UnitListContainer unitType="storage"/>
-            </div>
-        </div>
-    </div>
-);
-
-export default UnitTabsComponent;
diff --git a/src/components/sidebars/topology/rack/BackToRoomComponent.js b/src/components/sidebars/topology/rack/BackToRoomComponent.js
deleted file mode 100644
index 267001c6..00000000
--- a/src/components/sidebars/topology/rack/BackToRoomComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-const BackToRoomComponent = ({onClick}) => (
-    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
-        Back to room
-    </div>
-);
-
-export default BackToRoomComponent;
diff --git a/src/components/sidebars/topology/rack/DeleteRackComponent.js b/src/components/sidebars/topology/rack/DeleteRackComponent.js
deleted file mode 100644
index 06c45048..00000000
--- a/src/components/sidebars/topology/rack/DeleteRackComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-const DeleteRackComponent = ({onClick}) => {
-    return (
-        <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-2"/>
-            Delete this rack
-        </div>
-    );
-};
-
-export default DeleteRackComponent;
diff --git a/src/components/sidebars/topology/rack/EmptySlotComponent.js b/src/components/sidebars/topology/rack/EmptySlotComponent.js
deleted file mode 100644
index 08665072..00000000
--- a/src/components/sidebars/topology/rack/EmptySlotComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-const EmptySlotComponent = ({position, onAdd, inSimulation}) => (
-    <li className="list-group-item d-flex justify-content-between align-items-center">
-        <span className="badge badge-default badge-info mr-1 disabled">
-            {position}
-        </span>
-        {inSimulation ?
-            <span className="badge badge-default badge-success">
-                Empty Slot
-            </span> :
-            <button className="btn btn-outline-primary" onClick={onAdd}>
-                <span className="fa fa-plus mr-2"/>
-                Add machine
-            </button>
-        }
-    </li>
-);
-
-export default EmptySlotComponent;
diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
deleted file mode 100644
index c9211115..00000000
--- a/src/components/sidebars/topology/rack/MachineComponent.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import Shapes from "../../../../shapes";
-import {convertLoadToSimulationColor} from "../../../../util/simulation-load";
-
-const UnitIcon = ({id, type}) => (
-    <div>
-        <img
-            src={"/img/topology/" + id + "-icon.png"}
-            alt={"Machine contains " + type + " units"}
-            className="img-fluid ml-1"
-            style={{maxHeight: "35px"}}
-        />
-    </div>
-);
-
-const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => {
-    let color = "white";
-    if (inSimulation && machineLoad) {
-        color = convertLoadToSimulationColor(machineLoad);
-    }
-    const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length
-        + machine.storageIds.length === 0;
-
-    return (
-        <li
-            className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
-            onClick={onClick}
-            style={{backgroundColor: color}}
-        >
-            <span className="badge badge-default badge-info mr-1">
-                {position}
-            </span>
-            <div className="d-inline-flex">
-                {machine.cpuIds.length > 0 ?
-                    <UnitIcon id="cpu" type="CPU"/> :
-                    undefined
-                }
-                {machine.gpuIds.length > 0 ?
-                    <UnitIcon id="gpu" type="GPU"/> :
-                    undefined
-                }
-                {machine.memoryIds.length > 0 ?
-                    <UnitIcon id="memory" type="memory"/> :
-                    undefined
-                }
-                {machine.storageIds.length > 0 ?
-                    <UnitIcon id="storage" type="storage"/> :
-                    undefined
-                }
-                {hasNoUnits ?
-                    <span className="badge badge-default badge-warning">
-                        Machine with no units
-                    </span> :
-                    undefined
-                }
-            </div>
-        </li>
-    );
-};
-
-MachineComponent.propTypes = {
-    machine: Shapes.Machine
-};
-
-export default MachineComponent;
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.js b/src/components/sidebars/topology/rack/MachineListComponent.js
deleted file mode 100644
index 41522e36..00000000
--- a/src/components/sidebars/topology/rack/MachineListComponent.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import EmptySlotContainer from "../../../../containers/sidebars/topology/rack/EmptySlotContainer";
-import MachineContainer from "../../../../containers/sidebars/topology/rack/MachineContainer";
-import "./MachineListComponent.css";
-
-const MachineListComponent = ({machineIds}) => {
-    return (
-        <ul className="list-group machine-list">
-            {machineIds.map((machineId, index) => {
-                if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index + 1}/>;
-                } else {
-                    return <MachineContainer key={index} position={index + 1} machineId={machineId}/>;
-                }
-            })}
-        </ul>
-    );
-};
-
-export default MachineListComponent;
diff --git a/src/components/sidebars/topology/rack/MachineListComponent.sass b/src/components/sidebars/topology/rack/MachineListComponent.sass
deleted file mode 100644
index bbcfe696..00000000
--- a/src/components/sidebars/topology/rack/MachineListComponent.sass
+++ /dev/null
@@ -1,2 +0,0 @@
-.machine-list li
-  min-height: 64px
diff --git a/src/components/sidebars/topology/rack/RackNameComponent.js b/src/components/sidebars/topology/rack/RackNameComponent.js
deleted file mode 100644
index ee8d194b..00000000
--- a/src/components/sidebars/topology/rack/RackNameComponent.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import NameComponent from "../NameComponent";
-
-const RackNameComponent = ({rackName, onEdit}) => (
-    <NameComponent name={rackName} onEdit={onEdit}/>
-);
-
-export default RackNameComponent;
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.js b/src/components/sidebars/topology/rack/RackSidebarComponent.js
deleted file mode 100644
index 6a36972f..00000000
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer";
-import BackToRoomContainer from "../../../../containers/sidebars/topology/rack/BackToRoomContainer";
-import DeleteRackContainer from "../../../../containers/sidebars/topology/rack/DeleteRackContainer";
-import MachineListContainer from "../../../../containers/sidebars/topology/rack/MachineListContainer";
-import RackNameContainer from "../../../../containers/sidebars/topology/rack/RackNameContainer";
-import "./RackSidebarComponent.css";
-
-const RackSidebarComponent = ({inSimulation, rackId}) => {
-    return (
-        <div className="rack-sidebar-container flex-column">
-            <div className="rack-sidebar-header-container">
-                <RackNameContainer/>
-                <BackToRoomContainer/>
-                {inSimulation ?
-                    <div>
-                        <LoadBarContainer objectType="rack" objectId={rackId}/>
-                        <LoadChartContainer objectType="rack" objectId={rackId}/>
-                    </div> :
-                    <div>
-                        <DeleteRackContainer/>
-                    </div>
-                }
-            </div>
-            <div className="machine-list-container mt-2">
-                <MachineListContainer/>
-            </div>
-        </div>
-    );
-};
-
-export default RackSidebarComponent;
diff --git a/src/components/sidebars/topology/rack/RackSidebarComponent.sass b/src/components/sidebars/topology/rack/RackSidebarComponent.sass
deleted file mode 100644
index 822804bc..00000000
--- a/src/components/sidebars/topology/rack/RackSidebarComponent.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.rack-sidebar-container
-  display: flex
-  height: 100%
-  max-height: 100%
-
-.rack-sidebar-header-container
-  flex: 0
-
-.machine-list-container
-  flex: 1
-  overflow-y: scroll
diff --git a/src/components/sidebars/topology/room/BackToBuildingComponent.js b/src/components/sidebars/topology/room/BackToBuildingComponent.js
deleted file mode 100644
index 81384ba5..00000000
--- a/src/components/sidebars/topology/room/BackToBuildingComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-
-const BackToBuildingComponent = ({onClick}) => (
-    <div className="btn btn-secondary btn-block mb-2" onClick={onClick}>
-        <span className="fa fa-angle-left mr-2"/>
-        Back to building
-    </div>
-);
-
-export default BackToBuildingComponent;
diff --git a/src/components/sidebars/topology/room/DeleteRoomComponent.js b/src/components/sidebars/topology/room/DeleteRoomComponent.js
deleted file mode 100644
index 72bb6a83..00000000
--- a/src/components/sidebars/topology/room/DeleteRoomComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-const DeleteRoomComponent = ({onClick}) => {
-    return (
-        <div className="btn btn-danger btn-block" onClick={onClick}>
-            <span className="fa fa-trash mr-2"/>
-            Delete this room
-        </div>
-    );
-};
-
-export default DeleteRoomComponent;
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
deleted file mode 100644
index 9bfe28ce..00000000
--- a/src/components/sidebars/topology/room/RackConstructionComponent.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-const RackConstructionComponent = ({inRackConstructionMode, onStart, onStop}) => {
-    if (inRackConstructionMode) {
-        return (
-            <div className="btn btn-primary btn-block" onClick={onStop}>
-                <span className="fa fa-times mr-2"/>
-                Stop rack construction
-            </div>
-        );
-    }
-
-    return (
-        <div className="btn btn-primary btn-block" onClick={onStart}>
-            <span className="fa fa-plus mr-2"/>
-            Start rack construction
-        </div>
-    );
-};
-
-export default RackConstructionComponent;
diff --git a/src/components/sidebars/topology/room/RoomNameComponent.js b/src/components/sidebars/topology/room/RoomNameComponent.js
deleted file mode 100644
index 4d3e41cc..00000000
--- a/src/components/sidebars/topology/room/RoomNameComponent.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-import NameComponent from "../NameComponent";
-
-const RoomNameComponent = ({roomName, onEdit}) => (
-    <NameComponent name={roomName} onEdit={onEdit}/>
-);
-
-export default RoomNameComponent;
diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js
deleted file mode 100644
index fb3c3296..00000000
--- a/src/components/sidebars/topology/room/RoomSidebarComponent.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import LoadBarContainer from "../../../../containers/sidebars/elements/LoadBarContainer";
-import LoadChartContainer from "../../../../containers/sidebars/elements/LoadChartContainer";
-import BackToBuildingContainer from "../../../../containers/sidebars/topology/room/BackToBuildingContainer";
-import DeleteRoomContainer from "../../../../containers/sidebars/topology/room/DeleteRoomContainer";
-import RackConstructionContainer from "../../../../containers/sidebars/topology/room/RackConstructionContainer";
-import RoomNameContainer from "../../../../containers/sidebars/topology/room/RoomNameContainer";
-import RoomTypeContainer from "../../../../containers/sidebars/topology/room/RoomTypeContainer";
-
-const RoomSidebarComponent = ({roomId, roomType, inSimulation}) => {
-    let allowedObjects;
-    if (!inSimulation && roomType === "SERVER") {
-        allowedObjects = <RackConstructionContainer/>;
-    }
-
-    return (
-        <div>
-            <RoomNameContainer/>
-            <RoomTypeContainer/>
-            <BackToBuildingContainer/>
-            {inSimulation ?
-                <div>
-                    <LoadBarContainer objectType="room" objectId={roomId}/>
-                    <LoadChartContainer objectType="room" objectId={roomId}/>
-                </div> :
-                <div>
-                    {allowedObjects}
-                    <DeleteRoomContainer/>
-                </div>
-            }
-        </div>
-    );
-};
-
-export default RoomSidebarComponent;
diff --git a/src/components/sidebars/topology/room/RoomTypeComponent.js b/src/components/sidebars/topology/room/RoomTypeComponent.js
deleted file mode 100644
index c48c185a..00000000
--- a/src/components/sidebars/topology/room/RoomTypeComponent.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import {ROOM_TYPE_TO_NAME_MAP} from "../../../../util/room-types";
-
-const RoomTypeComponent = ({roomType}) => (
-    <p className="lead">
-        {ROOM_TYPE_TO_NAME_MAP[roomType]}
-    </p>
-);
-
-export default RoomTypeComponent;
diff --git a/src/components/timeline/PlayButtonComponent.js b/src/components/timeline/PlayButtonComponent.js
deleted file mode 100644
index 6ec70cc3..00000000
--- a/src/components/timeline/PlayButtonComponent.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-const PlayButtonComponent = ({isPlaying, onPlay, onPause}) => (
-    <div className="play-btn" onClick={() => isPlaying ? onPause() : onPlay()}>
-        {isPlaying ?
-            <span className="fa fa-pause"/> :
-            <span className="fa fa-play"/>
-        }
-    </div>
-);
-
-export default PlayButtonComponent;
diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass
deleted file mode 100644
index bfb1a4d7..00000000
--- a/src/components/timeline/Timeline.sass
+++ /dev/null
@@ -1,112 +0,0 @@
-@import ../../style-globals/_variables.sass
-@import ../../style-globals/_mixins.sass
-
-$container-size: 500px
-$play-btn-size: 40px
-$border-width: 1px
-$timeline-border: $border-width solid $gray-semi-dark
-
-.timeline-bar
-  display: block
-  position: absolute
-  left: 0
-  bottom: 20px
-  width: 100%
-  text-align: center
-  z-index: 2000
-
-  pointer-events: none
-
-.timeline-container
-  display: inline-block
-  margin: 0 auto
-  text-align: left
-
-  width: $container-size
-
-.timeline-labels
-  display: block
-  height: 25px
-  line-height: 25px
-
-  div
-    display: inline-block
-
-  .start-time-label
-    margin-left: $play-btn-size - $border-width
-    padding-left: 4px
-
-  .end-time-label
-    padding-right: 4px
-    float: right
-
-.timeline-controls
-  display: flex
-  border: $timeline-border
-  overflow: hidden
-
-  pointer-events: all
-
-  +border-radius($standard-border-radius)
-
-  .play-btn
-    width: $play-btn-size
-    height: $play-btn-size + $border-width
-    line-height: $play-btn-size + $border-width
-    text-align: center
-    float: left
-    margin-top: -$border-width
-
-    font-size: 16pt
-    background: #333
-    color: #eee
-
-    +transition(background, $transition-length)
-    +user-select
-    +clickable
-
-  .play-btn:hover
-    background: #656565
-
-  .play-btn:active
-    background: #000
-
-  .timeline
-    position: relative
-    flex: 1
-    height: $play-btn-size
-    line-height: $play-btn-size
-    float: right
-
-    background: $blue-light
-
-    z-index: 500
-
-    div
-      +transition(all, $transition-length)
-
-    .time-marker
-      position: absolute
-      top: 0
-      left: 0
-
-      width: 6px
-      height: 100%
-
-      background: $blue-very-dark
-
-      +border-radius(2px)
-
-      z-index: 503
-
-    .section-marker
-      position: absolute
-      top: 0
-      left: 0
-
-      width: 3px
-      height: 100%
-
-      background: #222222
-
-      z-index: 504
diff --git a/src/components/timeline/TimelineComponent.js b/src/components/timeline/TimelineComponent.js
deleted file mode 100644
index 119c396b..00000000
--- a/src/components/timeline/TimelineComponent.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer";
-import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer";
-import "./Timeline.css";
-
-class TimelineComponent extends React.Component {
-    componentDidMount() {
-        this.interval = setInterval(() => {
-            if (!this.props.isPlaying) {
-                return;
-            }
-
-            if (this.props.currentTick < this.props.lastSimulatedTick) {
-                this.props.incrementTick();
-            } else {
-                this.props.pauseSimulation();
-            }
-        }, 1000);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.interval);
-    }
-
-    render() {
-        return (
-            <div className="timeline-bar">
-                <div className="timeline-container">
-                    <TimelineLabelsContainer/>
-                    <TimelineControlsContainer/>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default TimelineComponent;
diff --git a/src/components/timeline/TimelineControlsComponent.js b/src/components/timeline/TimelineControlsComponent.js
deleted file mode 100644
index bd98afc3..00000000
--- a/src/components/timeline/TimelineControlsComponent.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import PlayButtonContainer from "../../containers/timeline/PlayButtonContainer";
-import {convertTickToPercentage} from "../../util/timeline";
-
-class TimelineControlsComponent extends React.Component {
-    onTimelineClick(e) {
-        const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth;
-        const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1));
-        this.props.goToTick(tick);
-    }
-
-    render() {
-        return (
-            <div className="timeline-controls">
-                <PlayButtonContainer/>
-                <div
-                    className="timeline"
-                    ref={timeline => this.timeline = timeline}
-                    onClick={this.onTimelineClick.bind(this)}
-                >
-                    <div
-                        className="time-marker"
-                        style={{left: convertTickToPercentage(this.props.currentTick, this.props.lastSimulatedTick)}}
-                    />
-                    {this.props.sectionTicks.map(sectionTick => (
-                        <div
-                            key={sectionTick}
-                            className="section-marker"
-                            style={{left: convertTickToPercentage(sectionTick, this.props.lastSimulatedTick)}}
-                            title="Topology changes at this tick"
-                        />
-                    ))}
-                </div>
-            </div>
-        );
-    }
-}
-
-export default TimelineControlsComponent;
diff --git a/src/components/timeline/TimelineLabelsComponent.js b/src/components/timeline/TimelineLabelsComponent.js
deleted file mode 100644
index 1f6053a1..00000000
--- a/src/components/timeline/TimelineLabelsComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import {convertSecondsToFormattedTime} from "../../util/date-time";
-
-const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => (
-    <div className="timeline-labels">
-        <div className="start-time-label">{convertSecondsToFormattedTime(currentTick)}</div>
-        <div className="end-time-label">{convertSecondsToFormattedTime(lastSimulatedTick)}</div>
-    </div>
-);
-
-export default TimelineLabelsComponent;
diff --git a/src/containers/app/map/DatacenterContainer.js b/src/containers/app/map/DatacenterContainer.js
new file mode 100644
index 00000000..6859f2d8
--- /dev/null
+++ b/src/containers/app/map/DatacenterContainer.js
@@ -0,0 +1,19 @@
+import {connect} from "react-redux";
+import DatacenterGroup from "../../../components/app/map/groups/DatacenterGroup";
+
+const mapStateToProps = state => {
+    if (state.currentDatacenterId === -1) {
+        return {};
+    }
+
+    return {
+        datacenter: state.objects.datacenter[state.currentDatacenterId],
+        interactionLevel: state.interactionLevel,
+    };
+};
+
+const DatacenterContainer = connect(
+    mapStateToProps
+)(DatacenterGroup);
+
+export default DatacenterContainer;
diff --git a/src/containers/app/map/GrayContainer.js b/src/containers/app/map/GrayContainer.js
new file mode 100644
index 00000000..a22ef3c8
--- /dev/null
+++ b/src/containers/app/map/GrayContainer.js
@@ -0,0 +1,16 @@
+import {connect} 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 = connect(
+    undefined,
+    mapDispatchToProps
+)(GrayLayer);
+
+export default GrayContainer;
diff --git a/src/containers/app/map/MapStage.js b/src/containers/app/map/MapStage.js
new file mode 100644
index 00000000..e0c85651
--- /dev/null
+++ b/src/containers/app/map/MapStage.js
@@ -0,0 +1,26 @@
+import {connect} from "react-redux";
+import {setMapDimensions, setMapPosition, setMapScale} from "../../../actions/map";
+import MapStageComponent from "../../../components/app/map/MapStageComponent";
+
+const mapStateToProps = state => {
+    return {
+        mapPosition: state.map.position,
+        mapDimensions: state.map.dimensions,
+        mapScale: state.map.scale,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setMapPosition: (x, y) => dispatch(setMapPosition(x, y)),
+        setMapDimensions: (width, height) => dispatch(setMapDimensions(width, height)),
+        setMapScale: (scale) => dispatch(setMapScale(scale)),
+    };
+};
+
+const MapStage = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(MapStageComponent);
+
+export default MapStage;
diff --git a/src/containers/app/map/RackContainer.js b/src/containers/app/map/RackContainer.js
new file mode 100644
index 00000000..38f01efc
--- /dev/null
+++ b/src/containers/app/map/RackContainer.js
@@ -0,0 +1,26 @@
+import {connect} from "react-redux";
+import RackGroup from "../../../components/app/map/groups/RackGroup";
+import {getStateLoad} from "../../../util/simulation-load";
+
+const mapStateToProps = (state, ownProps) => {
+    const inSimulation = state.currentExperimentId !== -1;
+
+    let rackLoad = undefined;
+    if (inSimulation) {
+        if (state.states.rack[state.currentTick] && state.states.rack[state.currentTick][ownProps.tile.objectId]) {
+            rackLoad = getStateLoad(state.loadMetric, state.states.rack[state.currentTick][ownProps.tile.objectId]);
+        }
+    }
+
+    return {
+        interactionLevel: state.interactionLevel,
+        inSimulation,
+        rackLoad,
+    };
+};
+
+const RackContainer = connect(
+    mapStateToProps
+)(RackGroup);
+
+export default RackContainer;
diff --git a/src/containers/app/map/RackEnergyFillContainer.js b/src/containers/app/map/RackEnergyFillContainer.js
new file mode 100644
index 00000000..d83dc386
--- /dev/null
+++ b/src/containers/app/map/RackEnergyFillContainer.js
@@ -0,0 +1,28 @@
+import {connect} 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].objectId];
+    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),
+    };
+};
+
+const RackSpaceFillContainer = connect(
+    mapStateToProps
+)(RackFillBar);
+
+export default RackSpaceFillContainer;
diff --git a/src/containers/app/map/RackSpaceFillContainer.js b/src/containers/app/map/RackSpaceFillContainer.js
new file mode 100644
index 00000000..bbcf4e2e
--- /dev/null
+++ b/src/containers/app/map/RackSpaceFillContainer.js
@@ -0,0 +1,16 @@
+import {connect} 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].objectId].machineIds;
+    return {
+        type: "space",
+        fillFraction: machineIds.filter(id => id !== null).length / machineIds.length,
+    };
+};
+
+const RackSpaceFillContainer = connect(
+    mapStateToProps
+)(RackFillBar);
+
+export default RackSpaceFillContainer;
diff --git a/src/containers/app/map/RoomContainer.js b/src/containers/app/map/RoomContainer.js
new file mode 100644
index 00000000..c8e146d6
--- /dev/null
+++ b/src/containers/app/map/RoomContainer.js
@@ -0,0 +1,24 @@
+import {connect} 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 mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)),
+    };
+};
+
+const RoomContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RoomGroup);
+
+export default RoomContainer;
diff --git a/src/containers/app/map/TileContainer.js b/src/containers/app/map/TileContainer.js
new file mode 100644
index 00000000..299016d1
--- /dev/null
+++ b/src/containers/app/map/TileContainer.js
@@ -0,0 +1,40 @@
+import {connect} from "react-redux";
+import {goFromRoomToRack} from "../../../actions/interaction-level";
+import TileGroup from "../../../components/app/map/groups/TileGroup";
+import {getStateLoad} from "../../../util/simulation-load";
+
+const mapStateToProps = (state, ownProps) => {
+    const tile = state.objects.tile[ownProps.tileId];
+    const inSimulation = state.currentExperimentId !== -1;
+
+    let roomLoad = undefined;
+    if (inSimulation) {
+        if (state.states.room[state.currentTick] && state.states.room[state.currentTick][tile.roomId]) {
+            roomLoad = getStateLoad(state.loadMetric, state.states.room[state.currentTick][tile.roomId]);
+        }
+    }
+
+    return {
+        interactionLevel: state.interactionLevel,
+        tile,
+        inSimulation,
+        roomLoad,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: tile => {
+            if (tile.objectType) {
+                dispatch(goFromRoomToRack(tile.id))
+            }
+        }
+    };
+};
+
+const TileContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(TileGroup);
+
+export default TileContainer;
diff --git a/src/containers/app/map/WallContainer.js b/src/containers/app/map/WallContainer.js
new file mode 100644
index 00000000..0ce8875a
--- /dev/null
+++ b/src/containers/app/map/WallContainer.js
@@ -0,0 +1,14 @@
+import {connect} 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 = connect(
+    mapStateToProps
+)(WallGroup);
+
+export default WallContainer;
diff --git a/src/containers/app/map/controls/ScaleIndicatorContainer.js b/src/containers/app/map/controls/ScaleIndicatorContainer.js
new file mode 100644
index 00000000..12596c9c
--- /dev/null
+++ b/src/containers/app/map/controls/ScaleIndicatorContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import ScaleIndicatorComponent from "../../../../components/app/map/controls/ScaleIndicatorComponent";
+
+const mapStateToProps = state => {
+    return {
+        scale: state.map.scale,
+    };
+};
+
+const ScaleIndicatorContainer = connect(
+    mapStateToProps
+)(ScaleIndicatorComponent);
+
+export default ScaleIndicatorContainer;
diff --git a/src/containers/app/map/controls/ZoomControlContainer.js b/src/containers/app/map/controls/ZoomControlContainer.js
new file mode 100644
index 00000000..b9cf0a63
--- /dev/null
+++ b/src/containers/app/map/controls/ZoomControlContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {setMapScale} from "../../../../actions/map";
+import ZoomControlComponent from "../../../../components/app/map/controls/ZoomControlComponent";
+
+const mapStateToProps = state => {
+    return {
+        mapScale: state.map.scale,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setMapScale: scale => dispatch(setMapScale(scale)),
+    };
+};
+
+const ZoomControlContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ZoomControlComponent);
+
+export default ZoomControlContainer;
diff --git a/src/containers/app/map/layers/MapLayer.js b/src/containers/app/map/layers/MapLayer.js
new file mode 100644
index 00000000..ea3a0b57
--- /dev/null
+++ b/src/containers/app/map/layers/MapLayer.js
@@ -0,0 +1,15 @@
+import {connect} 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 = connect(
+    mapStateToProps
+)(MapLayerComponent);
+
+export default MapLayer;
diff --git a/src/containers/app/map/layers/ObjectHoverLayer.js b/src/containers/app/map/layers/ObjectHoverLayer.js
new file mode 100644
index 00000000..d905fd42
--- /dev/null
+++ b/src/containers/app/map/layers/ObjectHoverLayer.js
@@ -0,0 +1,37 @@
+import {connect} 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 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.objectType);
+
+        },
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: (x, y) => dispatch(addRackToTile(x, y)),
+    };
+};
+
+const ObjectHoverLayer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ObjectHoverLayerComponent);
+
+export default ObjectHoverLayer;
diff --git a/src/containers/app/map/layers/RoomHoverLayer.js b/src/containers/app/map/layers/RoomHoverLayer.js
new file mode 100644
index 00000000..801ce549
--- /dev/null
+++ b/src/containers/app/map/layers/RoomHoverLayer.js
@@ -0,0 +1,50 @@
+import {connect} from "react-redux";
+import {toggleTileAtLocation} from "../../../../actions/topology/building";
+import RoomHoverLayerComponent from "../../../../components/app/map/layers/RoomHoverLayerComponent";
+import {
+    deriveValidNextTilePositions,
+    findPositionInPositions,
+    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) => {
+            if (state.interactionLevel.mode !== "BUILDING") {
+                return false;
+            }
+
+            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 => room.datacenterId === state.currentDatacenterId
+                    && room.id !== state.construction.currentRoomInConstruction);
+
+            [...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 validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles);
+            return findPositionInPositions(validNextPositions, x, y) !== -1;
+        },
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)),
+    };
+};
+
+const RoomHoverLayer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RoomHoverLayerComponent);
+
+export default RoomHoverLayer;
diff --git a/src/containers/app/sidebars/elements/LoadBarContainer.js b/src/containers/app/sidebars/elements/LoadBarContainer.js
new file mode 100644
index 00000000..ccaf1729
--- /dev/null
+++ b/src/containers/app/sidebars/elements/LoadBarContainer.js
@@ -0,0 +1,25 @@
+import {connect} from "react-redux";
+import LoadBarComponent from "../../../../components/app/sidebars/elements/LoadBarComponent";
+import {getStateLoad} from "../../../../util/simulation-load";
+
+const mapStateToProps = (state, ownProps) => {
+    let percent = 0;
+    let enabled = false;
+
+    const objectStates = state.states[ownProps.objectType];
+    if (objectStates[state.currentTick] && objectStates[state.currentTick][ownProps.objectId]) {
+        percent = Math.floor(100 * getStateLoad(state.loadMetric, objectStates[state.currentTick][ownProps.objectId]));
+        enabled = true;
+    }
+
+    return {
+        percent,
+        enabled
+    };
+};
+
+const LoadBarContainer = connect(
+    mapStateToProps
+)(LoadBarComponent);
+
+export default LoadBarContainer;
diff --git a/src/containers/app/sidebars/elements/LoadChartContainer.js b/src/containers/app/sidebars/elements/LoadChartContainer.js
new file mode 100644
index 00000000..227a4fd5
--- /dev/null
+++ b/src/containers/app/sidebars/elements/LoadChartContainer.js
@@ -0,0 +1,27 @@
+import {connect} from "react-redux";
+import LoadChartComponent from "../../../../components/app/sidebars/elements/LoadChartComponent";
+import {getStateLoad} from "../../../../util/simulation-load";
+
+const mapStateToProps = (state, ownProps) => {
+    const data = [];
+
+    if (state.lastSimulatedTick !== -1) {
+        const objectStates = state.states[ownProps.objectType];
+        Object.keys(objectStates).forEach(tick => {
+            if (objectStates[tick][ownProps.objectId]) {
+                data.push({x: tick, y: getStateLoad(state.loadMetric, objectStates[tick][ownProps.objectId])});
+            }
+        });
+    }
+
+    return {
+        data,
+        currentTick: state.currentTick,
+    };
+};
+
+const LoadChartContainer = connect(
+    mapStateToProps
+)(LoadChartComponent);
+
+export default LoadChartContainer;
diff --git a/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js b/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js
new file mode 100644
index 00000000..a5e403ce
--- /dev/null
+++ b/src/containers/app/sidebars/simulation/ExperimentMetadataContainer.js
@@ -0,0 +1,29 @@
+import {connect} from "react-redux";
+import ExperimentMetadataComponent from "../../../../components/app/sidebars/simulation/ExperimentMetadataComponent";
+
+const mapStateToProps = state => {
+    if (!state.objects.experiment[state.currentExperimentId]) {
+        return {
+            experimentName: "Loading experiment",
+            pathName: "",
+            traceName: "",
+            schedulerName: "",
+        }
+    }
+
+    const path = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId];
+    const pathName = path.name ? path.name : "Path " + path.id;
+
+    return {
+        experimentName: state.objects.experiment[state.currentExperimentId].name,
+        pathName,
+        traceName: state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].name,
+        schedulerName: state.objects.scheduler[state.objects.experiment[state.currentExperimentId].schedulerName].name,
+    };
+};
+
+const ExperimentMetadataContainer = connect(
+    mapStateToProps
+)(ExperimentMetadataComponent);
+
+export default ExperimentMetadataContainer;
diff --git a/src/containers/app/sidebars/simulation/LoadMetricContainer.js b/src/containers/app/sidebars/simulation/LoadMetricContainer.js
new file mode 100644
index 00000000..5ce3542c
--- /dev/null
+++ b/src/containers/app/sidebars/simulation/LoadMetricContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import LoadMetricComponent from "../../../../components/app/sidebars/simulation/LoadMetricComponent";
+
+const mapStateToProps = state => {
+    return {
+        loadMetric: state.loadMetric,
+    }
+};
+
+const LoadMetricContainer = connect(
+    mapStateToProps
+)(LoadMetricComponent);
+
+export default LoadMetricContainer;
diff --git a/src/containers/app/sidebars/simulation/TaskContainer.js b/src/containers/app/sidebars/simulation/TaskContainer.js
new file mode 100644
index 00000000..357bd7ed
--- /dev/null
+++ b/src/containers/app/sidebars/simulation/TaskContainer.js
@@ -0,0 +1,23 @@
+import {connect} from "react-redux";
+import TaskComponent from "../../../../components/app/sidebars/simulation/TaskComponent";
+
+const mapStateToProps = (state, ownProps) => {
+    let flopsLeft = state.objects.task[ownProps.taskId].totalFlopCount;
+
+    if (state.states.task[state.currentTick] && state.states.task[state.currentTick][ownProps.taskId]) {
+        flopsLeft = state.states.task[state.currentTick][ownProps.taskId].flopsLeft;
+    } else if (state.objects.task[ownProps.taskId].startTick < state.currentTick) {
+        flopsLeft = 0;
+    }
+
+    return {
+        task: state.objects.task[ownProps.taskId],
+        flopsLeft,
+    };
+};
+
+const TaskContainer = connect(
+    mapStateToProps
+)(TaskComponent);
+
+export default TaskContainer;
diff --git a/src/containers/app/sidebars/simulation/TraceContainer.js b/src/containers/app/sidebars/simulation/TraceContainer.js
new file mode 100644
index 00000000..7955f313
--- /dev/null
+++ b/src/containers/app/sidebars/simulation/TraceContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import TraceComponent from "../../../../components/app/sidebars/simulation/TraceComponent";
+
+const mapStateToProps = state => {
+    if (!state.objects.experiment[state.currentExperimentId] ||
+        !state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].jobIds) {
+        return {
+            jobs: []
+        };
+    }
+
+    return {
+        jobs: state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].jobIds
+            .map(id => state.objects.job[id]),
+    };
+};
+
+const TraceContainer = connect(
+    mapStateToProps
+)(TraceComponent);
+
+export default TraceContainer;
diff --git a/src/containers/app/sidebars/topology/TopologySidebar.js b/src/containers/app/sidebars/topology/TopologySidebar.js
new file mode 100644
index 00000000..ac59f5cc
--- /dev/null
+++ b/src/containers/app/sidebars/topology/TopologySidebar.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import TopologySidebarComponent from "../../../../components/app/sidebars/topology/TopologySidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        interactionLevel: state.interactionLevel
+    };
+};
+
+const TopologySidebar = connect(
+    mapStateToProps
+)(TopologySidebarComponent);
+
+export default TopologySidebar;
diff --git a/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js b/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js
new file mode 100644
index 00000000..ce7a308a
--- /dev/null
+++ b/src/containers/app/sidebars/topology/building/BuildingSidebarContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import BuildingSidebarComponent from "../../../../../components/app/sidebars/topology/building/BuildingSidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1
+    };
+};
+
+const BuildingSidebarContainer = connect(
+    mapStateToProps
+)(BuildingSidebarComponent);
+
+export default BuildingSidebarContainer;
diff --git a/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..3ec1349b
--- /dev/null
+++ b/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js
@@ -0,0 +1,28 @@
+import {connect} from "react-redux";
+import {
+    cancelNewRoomConstruction,
+    finishNewRoomConstruction,
+    startNewRoomConstruction
+} from "../../../../../actions/topology/building";
+import StartNewRoomConstructionComponent from "../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent";
+
+const mapStateToProps = state => {
+    return {
+        currentRoomInConstruction: state.construction.currentRoomInConstruction
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onStart: () => dispatch(startNewRoomConstruction()),
+        onFinish: () => dispatch(finishNewRoomConstruction()),
+        onCancel: () => dispatch(cancelNewRoomConstruction()),
+    };
+};
+
+const NewRoomConstructionButton = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(StartNewRoomConstructionComponent);
+
+export default NewRoomConstructionButton;
diff --git a/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
new file mode 100644
index 00000000..f0ac9220
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/BackToRackContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {goDownOneInteractionLevel} from "../../../../../actions/interaction-level";
+import BackToRackComponent from "../../../../../components/app/sidebars/topology/machine/BackToRackComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(goDownOneInteractionLevel()),
+    };
+};
+
+const BackToRackContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(BackToRackComponent);
+
+export default BackToRackContainer;
diff --git a/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
new file mode 100644
index 00000000..bfdde179
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {openDeleteMachineModal} from "../../../../../actions/modals/topology";
+import DeleteMachineComponent from "../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(openDeleteMachineModal()),
+    };
+};
+
+const DeleteMachineContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(DeleteMachineComponent);
+
+export default DeleteMachineContainer;
diff --git a/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
new file mode 100644
index 00000000..9d23dcb6
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/MachineNameContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import MachineNameComponent from "../../../../../components/app/sidebars/topology/machine/MachineNameComponent";
+
+const mapStateToProps = state => {
+    return {
+        position: state.interactionLevel.position,
+    };
+};
+
+const MachineNameContainer = connect(
+    mapStateToProps
+)(MachineNameComponent);
+
+export default MachineNameContainer;
diff --git a/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
new file mode 100644
index 00000000..5c28248c
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import MachineSidebarComponent from "../../../../../components/app/sidebars/topology/machine/MachineSidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1,
+        machineId: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId]
+            .machineIds[state.interactionLevel.position - 1],
+    };
+};
+
+const MachineSidebarContainer = connect(
+    mapStateToProps
+)(MachineSidebarComponent);
+
+export default MachineSidebarContainer;
diff --git a/src/containers/app/sidebars/topology/machine/UnitAddContainer.js b/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
new file mode 100644
index 00000000..f194ebcf
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/UnitAddContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {addUnit} from "../../../../../actions/topology/machine";
+import UnitAddComponent from "../../../../../components/app/sidebars/topology/machine/UnitAddComponent";
+
+const mapStateToProps = (state, ownProps) => {
+    return {
+        units: Object.values(state.objects[ownProps.unitType]),
+    };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onAdd: (id) => dispatch(addUnit(ownProps.unitType, id)),
+    };
+};
+
+const UnitAddContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(UnitAddComponent);
+
+export default UnitAddContainer;
diff --git a/src/containers/app/sidebars/topology/machine/UnitContainer.js b/src/containers/app/sidebars/topology/machine/UnitContainer.js
new file mode 100644
index 00000000..12024d5a
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/UnitContainer.js
@@ -0,0 +1,23 @@
+import {connect} from "react-redux";
+import {deleteUnit} from "../../../../../actions/topology/machine";
+import UnitComponent from "../../../../../components/app/sidebars/topology/machine/UnitComponent";
+
+const mapStateToProps = (state, ownProps) => {
+    return {
+        unit: state.objects[ownProps.unitType][ownProps.unitId],
+        inSimulation: state.currentExperimentId !== -1
+    };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onDelete: () => dispatch(deleteUnit(ownProps.unitType, ownProps.index)),
+    };
+};
+
+const UnitContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(UnitComponent);
+
+export default UnitContainer;
diff --git a/src/containers/app/sidebars/topology/machine/UnitListContainer.js b/src/containers/app/sidebars/topology/machine/UnitListContainer.js
new file mode 100644
index 00000000..e351c63c
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/UnitListContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import UnitListComponent from "../../../../../components/app/sidebars/topology/machine/UnitListComponent";
+
+const mapStateToProps = (state, ownProps) => {
+    return {
+        unitIds: state.objects.machine[state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId]
+            .machineIds[state.interactionLevel.position - 1]][ownProps.unitType + "Ids"],
+        inSimulation: state.currentExperimentId !== -1
+    };
+};
+
+const UnitListContainer = connect(
+    mapStateToProps
+)(UnitListComponent);
+
+export default UnitListContainer;
diff --git a/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js b/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js
new file mode 100644
index 00000000..46952c74
--- /dev/null
+++ b/src/containers/app/sidebars/topology/machine/UnitTabsContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import UnitTabsComponent from "../../../../../components/app/sidebars/topology/machine/UnitTabsComponent";
+
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1,
+    };
+};
+
+const UnitTabsContainer = connect(
+    mapStateToProps
+)(UnitTabsComponent);
+
+export default UnitTabsContainer;
diff --git a/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
new file mode 100644
index 00000000..01653540
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {goDownOneInteractionLevel} from "../../../../../actions/interaction-level";
+import BackToRoomComponent from "../../../../../components/app/sidebars/topology/rack/BackToRoomComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(goDownOneInteractionLevel()),
+    };
+};
+
+const BackToRoomContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(BackToRoomComponent);
+
+export default BackToRoomContainer;
diff --git a/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..cf225558
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {openDeleteRackModal} from "../../../../../actions/modals/topology";
+import DeleteRackComponent from "../../../../../components/app/sidebars/topology/rack/DeleteRackComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(openDeleteRackModal()),
+    };
+};
+
+const DeleteRackContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(DeleteRackComponent);
+
+export default DeleteRackContainer;
diff --git a/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
new file mode 100644
index 00000000..b8f5e553
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {addMachine} from "../../../../../actions/topology/rack";
+import EmptySlotComponent from "../../../../../components/app/sidebars/topology/rack/EmptySlotComponent";
+
+const mapStateToProps = state => {
+    return {
+        inSimulation: state.currentExperimentId !== -1
+    };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onAdd: () => dispatch(addMachine(ownProps.position)),
+    };
+};
+
+const EmptySlotContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(EmptySlotComponent);
+
+export default EmptySlotContainer;
diff --git a/src/containers/app/sidebars/topology/rack/MachineContainer.js b/src/containers/app/sidebars/topology/rack/MachineContainer.js
new file mode 100644
index 00000000..cd15ddd0
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/MachineContainer.js
@@ -0,0 +1,35 @@
+import {connect} from "react-redux";
+import {goFromRackToMachine} from "../../../../../actions/interaction-level";
+import MachineComponent from "../../../../../components/app/sidebars/topology/rack/MachineComponent";
+import {getStateLoad} from "../../../../../util/simulation-load";
+
+const mapStateToProps = (state, ownProps) => {
+    const machine = state.objects.machine[ownProps.machineId];
+    const inSimulation = state.currentExperimentId !== -1;
+
+    let machineLoad = undefined;
+    if (inSimulation) {
+        if (state.states.machine[state.currentTick] && state.states.machine[state.currentTick][machine.id]) {
+            machineLoad = getStateLoad(state.loadMetric, state.states.machine[state.currentTick][machine.id]);
+        }
+    }
+
+    return {
+        machine,
+        inSimulation,
+        machineLoad
+    };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onClick: () => dispatch(goFromRackToMachine(ownProps.position)),
+    };
+};
+
+const MachineContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(MachineComponent);
+
+export default MachineContainer;
diff --git a/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/src/containers/app/sidebars/topology/rack/MachineListContainer.js
new file mode 100644
index 00000000..dbedfbb2
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/MachineListContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import MachineListComponent from "../../../../../components/app/sidebars/topology/rack/MachineListComponent";
+
+const mapStateToProps = state => {
+    return {
+        machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId].machineIds,
+    };
+};
+
+const MachineListContainer = connect(
+    mapStateToProps
+)(MachineListComponent);
+
+export default MachineListContainer;
diff --git a/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/src/containers/app/sidebars/topology/rack/RackNameContainer.js
new file mode 100644
index 00000000..49a58155
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/RackNameContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {openEditRackNameModal} from "../../../../../actions/modals/topology";
+import RackNameComponent from "../../../../../components/app/sidebars/topology/rack/RackNameComponent";
+
+const mapStateToProps = state => {
+    return {
+        rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId].name,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onEdit: () => dispatch(openEditRackNameModal()),
+    };
+};
+
+const RackNameContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RackNameComponent);
+
+export default RackNameContainer;
diff --git a/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
new file mode 100644
index 00000000..ba51ee4a
--- /dev/null
+++ b/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js
@@ -0,0 +1,15 @@
+import {connect} from "react-redux";
+import RackSidebarComponent from "../../../../../components/app/sidebars/topology/rack/RackSidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        rackId: state.objects.tile[state.interactionLevel.tileId].objectId,
+        inSimulation: state.currentExperimentId !== -1,
+    };
+};
+
+const RackSidebarContainer = connect(
+    mapStateToProps
+)(RackSidebarComponent);
+
+export default RackSidebarContainer;
diff --git a/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
new file mode 100644
index 00000000..a6366552
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {goDownOneInteractionLevel} from "../../../../../actions/interaction-level";
+import BackToBuildingComponent from "../../../../../components/app/sidebars/topology/room/BackToBuildingComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(goDownOneInteractionLevel()),
+    };
+};
+
+const BackToBuildingContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(BackToBuildingComponent);
+
+export default BackToBuildingContainer;
diff --git a/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..0c9aef1c
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {openDeleteRoomModal} from "../../../../../actions/modals/topology";
+import DeleteRoomComponent from "../../../../../components/app/sidebars/topology/room/DeleteRoomComponent";
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onClick: () => dispatch(openDeleteRoomModal()),
+    };
+};
+
+const DeleteRoomContainer = connect(
+    undefined,
+    mapDispatchToProps
+)(DeleteRoomComponent);
+
+export default DeleteRoomContainer;
diff --git a/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
new file mode 100644
index 00000000..f06a3ab2
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
@@ -0,0 +1,23 @@
+import {connect} from "react-redux";
+import {startRackConstruction, stopRackConstruction} from "../../../../../actions/topology/room";
+import RackConstructionComponent from "../../../../../components/app/sidebars/topology/room/RackConstructionComponent";
+
+const mapStateToProps = state => {
+    return {
+        inRackConstructionMode: state.construction.inRackConstructionMode,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onStart: () => dispatch(startRackConstruction()),
+        onStop: () => dispatch(stopRackConstruction()),
+    };
+};
+
+const RackConstructionContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RackConstructionComponent);
+
+export default RackConstructionContainer;
diff --git a/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/src/containers/app/sidebars/topology/room/RoomNameContainer.js
new file mode 100644
index 00000000..c1f7f397
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/RoomNameContainer.js
@@ -0,0 +1,22 @@
+import {connect} from "react-redux";
+import {openEditRoomNameModal} from "../../../../../actions/modals/topology";
+import RoomNameComponent from "../../../../../components/app/sidebars/topology/room/RoomNameComponent";
+
+const mapStateToProps = state => {
+    return {
+        roomName: state.objects.room[state.interactionLevel.roomId].name,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onEdit: () => dispatch(openEditRoomNameModal()),
+    };
+};
+
+const RoomNameContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(RoomNameComponent);
+
+export default RoomNameContainer;
diff --git a/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js b/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
new file mode 100644
index 00000000..6371e6a1
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import RoomSidebarComponent from "../../../../../components/app/sidebars/topology/room/RoomSidebarComponent";
+
+const mapStateToProps = state => {
+    return {
+        roomId: state.interactionLevel.roomId,
+        roomType: state.objects.room[state.interactionLevel.roomId].roomType,
+        inSimulation: state.currentExperimentId !== -1,
+    };
+};
+
+const RoomSidebarContainer = connect(
+    mapStateToProps
+)(RoomSidebarComponent);
+
+export default RoomSidebarContainer;
diff --git a/src/containers/app/sidebars/topology/room/RoomTypeContainer.js b/src/containers/app/sidebars/topology/room/RoomTypeContainer.js
new file mode 100644
index 00000000..8cc1126a
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/RoomTypeContainer.js
@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import RoomTypeComponent from "../../../../../components/app/sidebars/topology/room/RoomTypeComponent";
+
+const mapStateToProps = state => {
+    return {
+        roomType: state.objects.room[state.interactionLevel.roomId].roomType,
+    };
+};
+
+const RoomNameContainer = connect(
+    mapStateToProps
+)(RoomTypeComponent);
+
+export default RoomNameContainer;
diff --git a/src/containers/app/timeline/PlayButtonContainer.js b/src/containers/app/timeline/PlayButtonContainer.js
new file mode 100644
index 00000000..3db5302c
--- /dev/null
+++ b/src/containers/app/timeline/PlayButtonContainer.js
@@ -0,0 +1,23 @@
+import {connect} from "react-redux";
+import {pauseSimulation, playSimulation} from "../../../actions/simulation/playback";
+import PlayButtonComponent from "../../../components/app/timeline/PlayButtonComponent";
+
+const mapStateToProps = state => {
+    return {
+        isPlaying: state.isPlaying,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        onPlay: () => dispatch(playSimulation()),
+        onPause: () => dispatch(pauseSimulation()),
+    };
+};
+
+const PlayButtonContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PlayButtonComponent);
+
+export default PlayButtonContainer;
diff --git a/src/containers/app/timeline/TimelineContainer.js b/src/containers/app/timeline/TimelineContainer.js
new file mode 100644
index 00000000..46491f9b
--- /dev/null
+++ b/src/containers/app/timeline/TimelineContainer.js
@@ -0,0 +1,39 @@
+import {connect} from "react-redux";
+import {pauseSimulation} from "../../../actions/simulation/playback";
+import {incrementTick} from "../../../actions/simulation/tick";
+import {setCurrentDatacenter} from "../../../actions/topology/building";
+import TimelineComponent from "../../../components/app/timeline/TimelineComponent";
+
+const mapStateToProps = state => {
+    let sections = [];
+    if (state.currentExperimentId !== -1) {
+        const sectionIds = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId].sectionIds;
+
+        if (sectionIds) {
+            sections = sectionIds.map(sectionId => state.objects.section[sectionId]);
+        }
+    }
+
+    return {
+        isPlaying: state.isPlaying,
+        currentTick: state.currentTick,
+        lastSimulatedTick: state.lastSimulatedTick,
+        currentDatacenterId: state.currentDatacenterId,
+        sections,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        incrementTick: () => dispatch(incrementTick()),
+        pauseSimulation: () => dispatch(pauseSimulation()),
+        setCurrentDatacenter: id => dispatch(setCurrentDatacenter(id))
+    };
+};
+
+const TimelineContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(TimelineComponent);
+
+export default TimelineContainer;
diff --git a/src/containers/app/timeline/TimelineControlsContainer.js b/src/containers/app/timeline/TimelineControlsContainer.js
new file mode 100644
index 00000000..e91a0aca
--- /dev/null
+++ b/src/containers/app/timeline/TimelineControlsContainer.js
@@ -0,0 +1,34 @@
+import {connect} from "react-redux";
+import {goToTick} from "../../../actions/simulation/tick";
+import TimelineControlsComponent from "../../../components/app/timeline/TimelineControlsComponent";
+
+const mapStateToProps = state => {
+    let sectionTicks = [];
+    if (state.currentExperimentId !== -1) {
+        const sectionIds = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId].sectionIds;
+        if (sectionIds) {
+            sectionTicks = sectionIds
+                .filter(sectionId => state.objects.section[sectionId].startTick !== 0)
+                .map(sectionId => state.objects.section[sectionId].startTick);
+        }
+    }
+
+    return {
+        currentTick: state.currentTick,
+        lastSimulatedTick: state.lastSimulatedTick,
+        sectionTicks,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        goToTick: (tick) => dispatch(goToTick(tick)),
+    };
+};
+
+const TimelineControlsContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(TimelineControlsComponent);
+
+export default TimelineControlsContainer;
diff --git a/src/containers/app/timeline/TimelineLabelsContainer.js b/src/containers/app/timeline/TimelineLabelsContainer.js
new file mode 100644
index 00000000..3dfad9f2
--- /dev/null
+++ b/src/containers/app/timeline/TimelineLabelsContainer.js
@@ -0,0 +1,15 @@
+import {connect} from "react-redux";
+import TimelineLabelsComponent from "../../../components/app/timeline/TimelineLabelsComponent";
+
+const mapStateToProps = state => {
+    return {
+        currentTick: state.currentTick,
+        lastSimulatedTick: state.lastSimulatedTick,
+    };
+};
+
+const TimelineLabelsContainer = connect(
+    mapStateToProps
+)(TimelineLabelsComponent);
+
+export default TimelineLabelsContainer;
diff --git a/src/containers/map/DatacenterContainer.js b/src/containers/map/DatacenterContainer.js
deleted file mode 100644
index b56adbac..00000000
--- a/src/containers/map/DatacenterContainer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import {connect} from "react-redux";
-import DatacenterGroup from "../../components/map/groups/DatacenterGroup";
-
-const mapStateToProps = state => {
-    if (state.currentDatacenterId === -1) {
-        return {};
-    }
-
-    return {
-        datacenter: state.objects.datacenter[state.currentDatacenterId],
-        interactionLevel: state.interactionLevel,
-    };
-};
-
-const DatacenterContainer = connect(
-    mapStateToProps
-)(DatacenterGroup);
-
-export default DatacenterContainer;
diff --git a/src/containers/map/GrayContainer.js b/src/containers/map/GrayContainer.js
deleted file mode 100644
index bc1dcc59..00000000
--- a/src/containers/map/GrayContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {goDownOneInteractionLevel} from "../../actions/interaction-level";
-import GrayLayer from "../../components/map/elements/GrayLayer";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel())
-    };
-};
-
-const GrayContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(GrayLayer);
-
-export default GrayContainer;
diff --git a/src/containers/map/MapStage.js b/src/containers/map/MapStage.js
deleted file mode 100644
index 62dd7463..00000000
--- a/src/containers/map/MapStage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {connect} from "react-redux";
-import {setMapDimensions, setMapPosition, setMapScale} from "../../actions/map";
-import MapStageComponent from "../../components/map/MapStageComponent";
-
-const mapStateToProps = state => {
-    return {
-        mapPosition: state.map.position,
-        mapDimensions: state.map.dimensions,
-        mapScale: state.map.scale,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        setMapPosition: (x, y) => dispatch(setMapPosition(x, y)),
-        setMapDimensions: (width, height) => dispatch(setMapDimensions(width, height)),
-        setMapScale: (scale) => dispatch(setMapScale(scale)),
-    };
-};
-
-const MapStage = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(MapStageComponent);
-
-export default MapStage;
diff --git a/src/containers/map/RackContainer.js b/src/containers/map/RackContainer.js
deleted file mode 100644
index 60df9aaf..00000000
--- a/src/containers/map/RackContainer.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {connect} from "react-redux";
-import RackGroup from "../../components/map/groups/RackGroup";
-import {getStateLoad} from "../../util/simulation-load";
-
-const mapStateToProps = (state, ownProps) => {
-    const inSimulation = state.currentExperimentId !== -1;
-
-    let rackLoad = undefined;
-    if (inSimulation) {
-        if (state.states.rack[state.currentTick] && state.states.rack[state.currentTick][ownProps.tile.objectId]) {
-            rackLoad = getStateLoad(state.loadMetric, state.states.rack[state.currentTick][ownProps.tile.objectId]);
-        }
-    }
-
-    return {
-        interactionLevel: state.interactionLevel,
-        inSimulation,
-        rackLoad,
-    };
-};
-
-const RackContainer = connect(
-    mapStateToProps
-)(RackGroup);
-
-export default RackContainer;
diff --git a/src/containers/map/RackEnergyFillContainer.js b/src/containers/map/RackEnergyFillContainer.js
deleted file mode 100644
index 0143ce80..00000000
--- a/src/containers/map/RackEnergyFillContainer.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {connect} from "react-redux";
-import RackFillBar from "../../components/map/elements/RackFillBar";
-
-const mapStateToProps = (state, ownProps) => {
-    let energyConsumptionTotal = 0;
-    const rack = state.objects.rack[state.objects.tile[ownProps.tileId].objectId];
-    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),
-    };
-};
-
-const RackSpaceFillContainer = connect(
-    mapStateToProps
-)(RackFillBar);
-
-export default RackSpaceFillContainer;
diff --git a/src/containers/map/RackSpaceFillContainer.js b/src/containers/map/RackSpaceFillContainer.js
deleted file mode 100644
index d6be823f..00000000
--- a/src/containers/map/RackSpaceFillContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import RackFillBar from "../../components/map/elements/RackFillBar";
-
-const mapStateToProps = (state, ownProps) => {
-    const machineIds = state.objects.rack[state.objects.tile[ownProps.tileId].objectId].machineIds;
-    return {
-        type: "space",
-        fillFraction: machineIds.filter(id => id !== null).length / machineIds.length,
-    };
-};
-
-const RackSpaceFillContainer = connect(
-    mapStateToProps
-)(RackFillBar);
-
-export default RackSpaceFillContainer;
diff --git a/src/containers/map/RoomContainer.js b/src/containers/map/RoomContainer.js
deleted file mode 100644
index 9edcb096..00000000
--- a/src/containers/map/RoomContainer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {connect} from "react-redux";
-import {goFromBuildingToRoom} from "../../actions/interaction-level";
-import RoomGroup from "../../components/map/groups/RoomGroup";
-
-const mapStateToProps = (state, ownProps) => {
-    return {
-        interactionLevel: state.interactionLevel,
-        currentRoomInConstruction: state.construction.currentRoomInConstruction,
-        room: state.objects.room[ownProps.roomId],
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)),
-    };
-};
-
-const RoomContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(RoomGroup);
-
-export default RoomContainer;
diff --git a/src/containers/map/TileContainer.js b/src/containers/map/TileContainer.js
deleted file mode 100644
index 75fac5ad..00000000
--- a/src/containers/map/TileContainer.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import {connect} from "react-redux";
-import {goFromRoomToRack} from "../../actions/interaction-level";
-import TileGroup from "../../components/map/groups/TileGroup";
-import {getStateLoad} from "../../util/simulation-load";
-
-const mapStateToProps = (state, ownProps) => {
-    const tile = state.objects.tile[ownProps.tileId];
-    const inSimulation = state.currentExperimentId !== -1;
-
-    let roomLoad = undefined;
-    if (inSimulation) {
-        if (state.states.room[state.currentTick] && state.states.room[state.currentTick][tile.roomId]) {
-            roomLoad = getStateLoad(state.loadMetric, state.states.room[state.currentTick][tile.roomId]);
-        }
-    }
-
-    return {
-        interactionLevel: state.interactionLevel,
-        tile,
-        inSimulation,
-        roomLoad,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: tile => {
-            if (tile.objectType) {
-                dispatch(goFromRoomToRack(tile.id))
-            }
-        }
-    };
-};
-
-const TileContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(TileGroup);
-
-export default TileContainer;
diff --git a/src/containers/map/WallContainer.js b/src/containers/map/WallContainer.js
deleted file mode 100644
index f8ccb2e9..00000000
--- a/src/containers/map/WallContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import WallGroup from "../../components/map/groups/WallGroup";
-
-const mapStateToProps = (state, ownProps) => {
-    return {
-        tiles: state.objects.room[ownProps.roomId].tileIds.map(tileId => state.objects.tile[tileId]),
-    };
-};
-
-const WallContainer = connect(
-    mapStateToProps
-)(WallGroup);
-
-export default WallContainer;
diff --git a/src/containers/map/controls/ScaleIndicatorContainer.js b/src/containers/map/controls/ScaleIndicatorContainer.js
deleted file mode 100644
index 06cc96f5..00000000
--- a/src/containers/map/controls/ScaleIndicatorContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import ScaleIndicatorComponent from "../../../components/map/controls/ScaleIndicatorComponent";
-
-const mapStateToProps = state => {
-    return {
-        scale: state.map.scale,
-    };
-};
-
-const ScaleIndicatorContainer = connect(
-    mapStateToProps
-)(ScaleIndicatorComponent);
-
-export default ScaleIndicatorContainer;
diff --git a/src/containers/map/controls/ZoomControlContainer.js b/src/containers/map/controls/ZoomControlContainer.js
deleted file mode 100644
index 280ede4f..00000000
--- a/src/containers/map/controls/ZoomControlContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import {setMapScale} from "../../../actions/map";
-import ZoomControlComponent from "../../../components/map/controls/ZoomControlComponent";
-
-const mapStateToProps = state => {
-    return {
-        mapScale: state.map.scale,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        setMapScale: scale => dispatch(setMapScale(scale)),
-    };
-};
-
-const ZoomControlContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(ZoomControlComponent);
-
-export default ZoomControlContainer;
diff --git a/src/containers/map/layers/MapLayer.js b/src/containers/map/layers/MapLayer.js
deleted file mode 100644
index 9ef5c662..00000000
--- a/src/containers/map/layers/MapLayer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {connect} from "react-redux";
-import MapLayerComponent from "../../../components/map/layers/MapLayerComponent";
-
-const mapStateToProps = state => {
-    return {
-        mapPosition: state.map.position,
-        mapScale: state.map.scale,
-    };
-};
-
-const MapLayer = connect(
-    mapStateToProps
-)(MapLayerComponent);
-
-export default MapLayer;
diff --git a/src/containers/map/layers/ObjectHoverLayer.js b/src/containers/map/layers/ObjectHoverLayer.js
deleted file mode 100644
index b0201257..00000000
--- a/src/containers/map/layers/ObjectHoverLayer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {connect} from "react-redux";
-import {addRackToTile} from "../../../actions/topology/room";
-import ObjectHoverLayerComponent from "../../../components/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 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.objectType);
-
-        },
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: (x, y) => dispatch(addRackToTile(x, y)),
-    };
-};
-
-const ObjectHoverLayer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(ObjectHoverLayerComponent);
-
-export default ObjectHoverLayer;
diff --git a/src/containers/map/layers/RoomHoverLayer.js b/src/containers/map/layers/RoomHoverLayer.js
deleted file mode 100644
index 528e45d3..00000000
--- a/src/containers/map/layers/RoomHoverLayer.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import {connect} from "react-redux";
-import {toggleTileAtLocation} from "../../../actions/topology/building";
-import RoomHoverLayerComponent from "../../../components/map/layers/RoomHoverLayerComponent";
-import {
-    deriveValidNextTilePositions,
-    findPositionInPositions,
-    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) => {
-            if (state.interactionLevel.mode !== "BUILDING") {
-                return false;
-            }
-
-            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 => room.datacenterId === state.currentDatacenterId
-                    && room.id !== state.construction.currentRoomInConstruction);
-
-            [...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 validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles);
-            return findPositionInPositions(validNextPositions, x, y) !== -1;
-        },
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)),
-    };
-};
-
-const RoomHoverLayer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(RoomHoverLayerComponent);
-
-export default RoomHoverLayer;
diff --git a/src/containers/sidebars/elements/LoadBarContainer.js b/src/containers/sidebars/elements/LoadBarContainer.js
deleted file mode 100644
index 08aec93c..00000000
--- a/src/containers/sidebars/elements/LoadBarContainer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import {connect} from "react-redux";
-import LoadBarComponent from "../../../components/sidebars/elements/LoadBarComponent";
-import {getStateLoad} from "../../../util/simulation-load";
-
-const mapStateToProps = (state, ownProps) => {
-    let percent = 0;
-    let enabled = false;
-
-    const objectStates = state.states[ownProps.objectType];
-    if (objectStates[state.currentTick] && objectStates[state.currentTick][ownProps.objectId]) {
-        percent = Math.floor(100 * getStateLoad(state.loadMetric, objectStates[state.currentTick][ownProps.objectId]));
-        enabled = true;
-    }
-
-    return {
-        percent,
-        enabled
-    };
-};
-
-const LoadBarContainer = connect(
-    mapStateToProps
-)(LoadBarComponent);
-
-export default LoadBarContainer;
diff --git a/src/containers/sidebars/elements/LoadChartContainer.js b/src/containers/sidebars/elements/LoadChartContainer.js
deleted file mode 100644
index 33b99a51..00000000
--- a/src/containers/sidebars/elements/LoadChartContainer.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {connect} from "react-redux";
-import LoadChartComponent from "../../../components/sidebars/elements/LoadChartComponent";
-import {getStateLoad} from "../../../util/simulation-load";
-
-const mapStateToProps = (state, ownProps) => {
-    const data = [];
-
-    if (state.lastSimulatedTick !== -1) {
-        const objectStates = state.states[ownProps.objectType];
-        Object.keys(objectStates).forEach(tick => {
-            if (objectStates[tick][ownProps.objectId]) {
-                data.push({x: tick, y: getStateLoad(state.loadMetric, objectStates[tick][ownProps.objectId])});
-            }
-        });
-    }
-
-    return {
-        data,
-        currentTick: state.currentTick,
-    };
-};
-
-const LoadChartContainer = connect(
-    mapStateToProps
-)(LoadChartComponent);
-
-export default LoadChartContainer;
diff --git a/src/containers/sidebars/simulation/ExperimentMetadataContainer.js b/src/containers/sidebars/simulation/ExperimentMetadataContainer.js
deleted file mode 100644
index 55323f11..00000000
--- a/src/containers/sidebars/simulation/ExperimentMetadataContainer.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {connect} from "react-redux";
-import ExperimentMetadataComponent from "../../../components/sidebars/simulation/ExperimentMetadataComponent";
-
-const mapStateToProps = state => {
-    if (!state.objects.experiment[state.currentExperimentId]) {
-        return {
-            experimentName: "Loading experiment",
-            pathName: "",
-            traceName: "",
-            schedulerName: "",
-        }
-    }
-
-    const path = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId];
-    const pathName = path.name ? path.name : "Path " + path.id;
-
-    return {
-        experimentName: state.objects.experiment[state.currentExperimentId].name,
-        pathName,
-        traceName: state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].name,
-        schedulerName: state.objects.scheduler[state.objects.experiment[state.currentExperimentId].schedulerName].name,
-    };
-};
-
-const ExperimentMetadataContainer = connect(
-    mapStateToProps
-)(ExperimentMetadataComponent);
-
-export default ExperimentMetadataContainer;
diff --git a/src/containers/sidebars/simulation/LoadMetricContainer.js b/src/containers/sidebars/simulation/LoadMetricContainer.js
deleted file mode 100644
index 71a50163..00000000
--- a/src/containers/sidebars/simulation/LoadMetricContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import LoadMetricComponent from "../../../components/sidebars/simulation/LoadMetricComponent";
-
-const mapStateToProps = state => {
-    return {
-        loadMetric: state.loadMetric,
-    }
-};
-
-const LoadMetricContainer = connect(
-    mapStateToProps
-)(LoadMetricComponent);
-
-export default LoadMetricContainer;
diff --git a/src/containers/sidebars/simulation/TaskContainer.js b/src/containers/sidebars/simulation/TaskContainer.js
deleted file mode 100644
index df06b5b8..00000000
--- a/src/containers/sidebars/simulation/TaskContainer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {connect} from "react-redux";
-import TaskComponent from "../../../components/sidebars/simulation/TaskComponent";
-
-const mapStateToProps = (state, ownProps) => {
-    let flopsLeft = state.objects.task[ownProps.taskId].totalFlopCount;
-
-    if (state.states.task[state.currentTick] && state.states.task[state.currentTick][ownProps.taskId]) {
-        flopsLeft = state.states.task[state.currentTick][ownProps.taskId].flopsLeft;
-    } else if (state.objects.task[ownProps.taskId].startTick < state.currentTick) {
-        flopsLeft = 0;
-    }
-
-    return {
-        task: state.objects.task[ownProps.taskId],
-        flopsLeft,
-    };
-};
-
-const TaskContainer = connect(
-    mapStateToProps
-)(TaskComponent);
-
-export default TaskContainer;
diff --git a/src/containers/sidebars/simulation/TraceContainer.js b/src/containers/sidebars/simulation/TraceContainer.js
deleted file mode 100644
index 6539823d..00000000
--- a/src/containers/sidebars/simulation/TraceContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import TraceComponent from "../../../components/sidebars/simulation/TraceComponent";
-
-const mapStateToProps = state => {
-    if (!state.objects.experiment[state.currentExperimentId] ||
-        !state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].jobIds) {
-        return {
-            jobs: []
-        };
-    }
-
-    return {
-        jobs: state.objects.trace[state.objects.experiment[state.currentExperimentId].traceId].jobIds
-            .map(id => state.objects.job[id]),
-    };
-};
-
-const TraceContainer = connect(
-    mapStateToProps
-)(TraceComponent);
-
-export default TraceContainer;
diff --git a/src/containers/sidebars/topology/TopologySidebar.js b/src/containers/sidebars/topology/TopologySidebar.js
deleted file mode 100644
index 6ed836da..00000000
--- a/src/containers/sidebars/topology/TopologySidebar.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import TopologySidebarComponent from "../../../components/sidebars/topology/TopologySidebarComponent";
-
-const mapStateToProps = state => {
-    return {
-        interactionLevel: state.interactionLevel
-    };
-};
-
-const TopologySidebar = connect(
-    mapStateToProps
-)(TopologySidebarComponent);
-
-export default TopologySidebar;
diff --git a/src/containers/sidebars/topology/building/BuildingSidebarContainer.js b/src/containers/sidebars/topology/building/BuildingSidebarContainer.js
deleted file mode 100644
index 28bd0b93..00000000
--- a/src/containers/sidebars/topology/building/BuildingSidebarContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import BuildingSidebarComponent from "../../../../components/sidebars/topology/building/BuildingSidebarComponent";
-
-const mapStateToProps = state => {
-    return {
-        inSimulation: state.currentExperimentId !== -1
-    };
-};
-
-const BuildingSidebarContainer = connect(
-    mapStateToProps
-)(BuildingSidebarComponent);
-
-export default BuildingSidebarContainer;
diff --git a/src/containers/sidebars/topology/building/NewRoomConstructionContainer.js b/src/containers/sidebars/topology/building/NewRoomConstructionContainer.js
deleted file mode 100644
index 0236522d..00000000
--- a/src/containers/sidebars/topology/building/NewRoomConstructionContainer.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {connect} from "react-redux";
-import {
-    cancelNewRoomConstruction,
-    finishNewRoomConstruction,
-    startNewRoomConstruction
-} from "../../../../actions/topology/building";
-import StartNewRoomConstructionComponent from "../../../../components/sidebars/topology/building/NewRoomConstructionComponent";
-
-const mapStateToProps = state => {
-    return {
-        currentRoomInConstruction: state.construction.currentRoomInConstruction
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onStart: () => dispatch(startNewRoomConstruction()),
-        onFinish: () => dispatch(finishNewRoomConstruction()),
-        onCancel: () => dispatch(cancelNewRoomConstruction()),
-    };
-};
-
-const NewRoomConstructionButton = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(StartNewRoomConstructionComponent);
-
-export default NewRoomConstructionButton;
diff --git a/src/containers/sidebars/topology/machine/BackToRackContainer.js b/src/containers/sidebars/topology/machine/BackToRackContainer.js
deleted file mode 100644
index 9f31fab9..00000000
--- a/src/containers/sidebars/topology/machine/BackToRackContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {goDownOneInteractionLevel} from "../../../../actions/interaction-level";
-import BackToRackComponent from "../../../../components/sidebars/topology/machine/BackToRackComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    };
-};
-
-const BackToRackContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(BackToRackComponent);
-
-export default BackToRackContainer;
diff --git a/src/containers/sidebars/topology/machine/DeleteMachineContainer.js b/src/containers/sidebars/topology/machine/DeleteMachineContainer.js
deleted file mode 100644
index 0c18598b..00000000
--- a/src/containers/sidebars/topology/machine/DeleteMachineContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {openDeleteMachineModal} from "../../../../actions/modals/topology";
-import DeleteMachineComponent from "../../../../components/sidebars/topology/machine/DeleteMachineComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(openDeleteMachineModal()),
-    };
-};
-
-const DeleteMachineContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(DeleteMachineComponent);
-
-export default DeleteMachineContainer;
diff --git a/src/containers/sidebars/topology/machine/MachineNameContainer.js b/src/containers/sidebars/topology/machine/MachineNameContainer.js
deleted file mode 100644
index 8e5413ef..00000000
--- a/src/containers/sidebars/topology/machine/MachineNameContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import MachineNameComponent from "../../../../components/sidebars/topology/machine/MachineNameComponent";
-
-const mapStateToProps = state => {
-    return {
-        position: state.interactionLevel.position,
-    };
-};
-
-const MachineNameContainer = connect(
-    mapStateToProps
-)(MachineNameComponent);
-
-export default MachineNameContainer;
diff --git a/src/containers/sidebars/topology/machine/MachineSidebarContainer.js b/src/containers/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index f99fc05e..00000000
--- a/src/containers/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import MachineSidebarComponent from "../../../../components/sidebars/topology/machine/MachineSidebarComponent";
-
-const mapStateToProps = state => {
-    return {
-        inSimulation: state.currentExperimentId !== -1,
-        machineId: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId]
-            .machineIds[state.interactionLevel.position - 1],
-    };
-};
-
-const MachineSidebarContainer = connect(
-    mapStateToProps
-)(MachineSidebarComponent);
-
-export default MachineSidebarContainer;
diff --git a/src/containers/sidebars/topology/machine/UnitAddContainer.js b/src/containers/sidebars/topology/machine/UnitAddContainer.js
deleted file mode 100644
index 66e35030..00000000
--- a/src/containers/sidebars/topology/machine/UnitAddContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import {addUnit} from "../../../../actions/topology/machine";
-import UnitAddComponent from "../../../../components/sidebars/topology/machine/UnitAddComponent";
-
-const mapStateToProps = (state, ownProps) => {
-    return {
-        units: Object.values(state.objects[ownProps.unitType]),
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onAdd: (id) => dispatch(addUnit(ownProps.unitType, id)),
-    };
-};
-
-const UnitAddContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(UnitAddComponent);
-
-export default UnitAddContainer;
diff --git a/src/containers/sidebars/topology/machine/UnitContainer.js b/src/containers/sidebars/topology/machine/UnitContainer.js
deleted file mode 100644
index 33001b99..00000000
--- a/src/containers/sidebars/topology/machine/UnitContainer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {connect} from "react-redux";
-import {deleteUnit} from "../../../../actions/topology/machine";
-import UnitComponent from "../../../../components/sidebars/topology/machine/UnitComponent";
-
-const mapStateToProps = (state, ownProps) => {
-    return {
-        unit: state.objects[ownProps.unitType][ownProps.unitId],
-        inSimulation: state.currentExperimentId !== -1
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onDelete: () => dispatch(deleteUnit(ownProps.unitType, ownProps.index)),
-    };
-};
-
-const UnitContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(UnitComponent);
-
-export default UnitContainer;
diff --git a/src/containers/sidebars/topology/machine/UnitListContainer.js b/src/containers/sidebars/topology/machine/UnitListContainer.js
deleted file mode 100644
index 9aed3f60..00000000
--- a/src/containers/sidebars/topology/machine/UnitListContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import UnitListComponent from "../../../../components/sidebars/topology/machine/UnitListComponent";
-
-const mapStateToProps = (state, ownProps) => {
-    return {
-        unitIds: state.objects.machine[state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId]
-            .machineIds[state.interactionLevel.position - 1]][ownProps.unitType + "Ids"],
-        inSimulation: state.currentExperimentId !== -1
-    };
-};
-
-const UnitListContainer = connect(
-    mapStateToProps
-)(UnitListComponent);
-
-export default UnitListContainer;
diff --git a/src/containers/sidebars/topology/machine/UnitTabsContainer.js b/src/containers/sidebars/topology/machine/UnitTabsContainer.js
deleted file mode 100644
index c92afcb5..00000000
--- a/src/containers/sidebars/topology/machine/UnitTabsContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import UnitTabsComponent from "../../../../components/sidebars/topology/machine/UnitTabsComponent";
-
-const mapStateToProps = state => {
-    return {
-        inSimulation: state.currentExperimentId !== -1,
-    };
-};
-
-const UnitTabsContainer = connect(
-    mapStateToProps
-)(UnitTabsComponent);
-
-export default UnitTabsContainer;
diff --git a/src/containers/sidebars/topology/rack/BackToRoomContainer.js b/src/containers/sidebars/topology/rack/BackToRoomContainer.js
deleted file mode 100644
index 876078d5..00000000
--- a/src/containers/sidebars/topology/rack/BackToRoomContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {goDownOneInteractionLevel} from "../../../../actions/interaction-level";
-import BackToRoomComponent from "../../../../components/sidebars/topology/rack/BackToRoomComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    };
-};
-
-const BackToRoomContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(BackToRoomComponent);
-
-export default BackToRoomContainer;
diff --git a/src/containers/sidebars/topology/rack/DeleteRackContainer.js b/src/containers/sidebars/topology/rack/DeleteRackContainer.js
deleted file mode 100644
index f95c48b8..00000000
--- a/src/containers/sidebars/topology/rack/DeleteRackContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {openDeleteRackModal} from "../../../../actions/modals/topology";
-import DeleteRackComponent from "../../../../components/sidebars/topology/rack/DeleteRackComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(openDeleteRackModal()),
-    };
-};
-
-const DeleteRackContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(DeleteRackComponent);
-
-export default DeleteRackContainer;
diff --git a/src/containers/sidebars/topology/rack/EmptySlotContainer.js b/src/containers/sidebars/topology/rack/EmptySlotContainer.js
deleted file mode 100644
index aa0673d1..00000000
--- a/src/containers/sidebars/topology/rack/EmptySlotContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import {addMachine} from "../../../../actions/topology/rack";
-import EmptySlotComponent from "../../../../components/sidebars/topology/rack/EmptySlotComponent";
-
-const mapStateToProps = state => {
-    return {
-        inSimulation: state.currentExperimentId !== -1
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onAdd: () => dispatch(addMachine(ownProps.position)),
-    };
-};
-
-const EmptySlotContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(EmptySlotComponent);
-
-export default EmptySlotContainer;
diff --git a/src/containers/sidebars/topology/rack/MachineContainer.js b/src/containers/sidebars/topology/rack/MachineContainer.js
deleted file mode 100644
index 7406d191..00000000
--- a/src/containers/sidebars/topology/rack/MachineContainer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import {connect} from "react-redux";
-import {goFromRackToMachine} from "../../../../actions/interaction-level";
-import MachineComponent from "../../../../components/sidebars/topology/rack/MachineComponent";
-import {getStateLoad} from "../../../../util/simulation-load";
-
-const mapStateToProps = (state, ownProps) => {
-    const machine = state.objects.machine[ownProps.machineId];
-    const inSimulation = state.currentExperimentId !== -1;
-
-    let machineLoad = undefined;
-    if (inSimulation) {
-        if (state.states.machine[state.currentTick] && state.states.machine[state.currentTick][machine.id]) {
-            machineLoad = getStateLoad(state.loadMetric, state.states.machine[state.currentTick][machine.id]);
-        }
-    }
-
-    return {
-        machine,
-        inSimulation,
-        machineLoad
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        onClick: () => dispatch(goFromRackToMachine(ownProps.position)),
-    };
-};
-
-const MachineContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(MachineComponent);
-
-export default MachineContainer;
diff --git a/src/containers/sidebars/topology/rack/MachineListContainer.js b/src/containers/sidebars/topology/rack/MachineListContainer.js
deleted file mode 100644
index eef2a4e1..00000000
--- a/src/containers/sidebars/topology/rack/MachineListContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import MachineListComponent from "../../../../components/sidebars/topology/rack/MachineListComponent";
-
-const mapStateToProps = state => {
-    return {
-        machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId].machineIds,
-    };
-};
-
-const MachineListContainer = connect(
-    mapStateToProps
-)(MachineListComponent);
-
-export default MachineListContainer;
diff --git a/src/containers/sidebars/topology/rack/RackNameContainer.js b/src/containers/sidebars/topology/rack/RackNameContainer.js
deleted file mode 100644
index 34416938..00000000
--- a/src/containers/sidebars/topology/rack/RackNameContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import {openEditRackNameModal} from "../../../../actions/modals/topology";
-import RackNameComponent from "../../../../components/sidebars/topology/rack/RackNameComponent";
-
-const mapStateToProps = state => {
-    return {
-        rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].objectId].name,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onEdit: () => dispatch(openEditRackNameModal()),
-    };
-};
-
-const RackNameContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(RackNameComponent);
-
-export default RackNameContainer;
diff --git a/src/containers/sidebars/topology/rack/RackSidebarContainer.js b/src/containers/sidebars/topology/rack/RackSidebarContainer.js
deleted file mode 100644
index 4652b968..00000000
--- a/src/containers/sidebars/topology/rack/RackSidebarContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {connect} from "react-redux";
-import RackSidebarComponent from "../../../../components/sidebars/topology/rack/RackSidebarComponent";
-
-const mapStateToProps = state => {
-    return {
-        rackId: state.objects.tile[state.interactionLevel.tileId].objectId,
-        inSimulation: state.currentExperimentId !== -1,
-    };
-};
-
-const RackSidebarContainer = connect(
-    mapStateToProps
-)(RackSidebarComponent);
-
-export default RackSidebarContainer;
diff --git a/src/containers/sidebars/topology/room/BackToBuildingContainer.js b/src/containers/sidebars/topology/room/BackToBuildingContainer.js
deleted file mode 100644
index 5ab772f6..00000000
--- a/src/containers/sidebars/topology/room/BackToBuildingContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {goDownOneInteractionLevel} from "../../../../actions/interaction-level";
-import BackToBuildingComponent from "../../../../components/sidebars/topology/room/BackToBuildingComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(goDownOneInteractionLevel()),
-    };
-};
-
-const BackToBuildingContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(BackToBuildingComponent);
-
-export default BackToBuildingContainer;
diff --git a/src/containers/sidebars/topology/room/DeleteRoomContainer.js b/src/containers/sidebars/topology/room/DeleteRoomContainer.js
deleted file mode 100644
index 23a8fa0a..00000000
--- a/src/containers/sidebars/topology/room/DeleteRoomContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import {openDeleteRoomModal} from "../../../../actions/modals/topology";
-import DeleteRoomComponent from "../../../../components/sidebars/topology/room/DeleteRoomComponent";
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onClick: () => dispatch(openDeleteRoomModal()),
-    };
-};
-
-const DeleteRoomContainer = connect(
-    undefined,
-    mapDispatchToProps
-)(DeleteRoomComponent);
-
-export default DeleteRoomContainer;
diff --git a/src/containers/sidebars/topology/room/RackConstructionContainer.js b/src/containers/sidebars/topology/room/RackConstructionContainer.js
deleted file mode 100644
index 0c539c75..00000000
--- a/src/containers/sidebars/topology/room/RackConstructionContainer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {connect} from "react-redux";
-import {startRackConstruction, stopRackConstruction} from "../../../../actions/topology/room";
-import RackConstructionComponent from "../../../../components/sidebars/topology/room/RackConstructionComponent";
-
-const mapStateToProps = state => {
-    return {
-        inRackConstructionMode: state.construction.inRackConstructionMode,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onStart: () => dispatch(startRackConstruction()),
-        onStop: () => dispatch(stopRackConstruction()),
-    };
-};
-
-const RackConstructionContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(RackConstructionComponent);
-
-export default RackConstructionContainer;
diff --git a/src/containers/sidebars/topology/room/RoomNameContainer.js b/src/containers/sidebars/topology/room/RoomNameContainer.js
deleted file mode 100644
index 7b9dc249..00000000
--- a/src/containers/sidebars/topology/room/RoomNameContainer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {connect} from "react-redux";
-import {openEditRoomNameModal} from "../../../../actions/modals/topology";
-import RoomNameComponent from "../../../../components/sidebars/topology/room/RoomNameComponent";
-
-const mapStateToProps = state => {
-    return {
-        roomName: state.objects.room[state.interactionLevel.roomId].name,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onEdit: () => dispatch(openEditRoomNameModal()),
-    };
-};
-
-const RoomNameContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(RoomNameComponent);
-
-export default RoomNameContainer;
diff --git a/src/containers/sidebars/topology/room/RoomSidebarContainer.js b/src/containers/sidebars/topology/room/RoomSidebarContainer.js
deleted file mode 100644
index 6dded3e7..00000000
--- a/src/containers/sidebars/topology/room/RoomSidebarContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {connect} from "react-redux";
-import RoomSidebarComponent from "../../../../components/sidebars/topology/room/RoomSidebarComponent";
-
-const mapStateToProps = state => {
-    return {
-        roomId: state.interactionLevel.roomId,
-        roomType: state.objects.room[state.interactionLevel.roomId].roomType,
-        inSimulation: state.currentExperimentId !== -1,
-    };
-};
-
-const RoomSidebarContainer = connect(
-    mapStateToProps
-)(RoomSidebarComponent);
-
-export default RoomSidebarContainer;
diff --git a/src/containers/sidebars/topology/room/RoomTypeContainer.js b/src/containers/sidebars/topology/room/RoomTypeContainer.js
deleted file mode 100644
index 392bc479..00000000
--- a/src/containers/sidebars/topology/room/RoomTypeContainer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {connect} from "react-redux";
-import RoomTypeComponent from "../../../../components/sidebars/topology/room/RoomTypeComponent";
-
-const mapStateToProps = state => {
-    return {
-        roomType: state.objects.room[state.interactionLevel.roomId].roomType,
-    };
-};
-
-const RoomNameContainer = connect(
-    mapStateToProps
-)(RoomTypeComponent);
-
-export default RoomNameContainer;
diff --git a/src/containers/timeline/PlayButtonContainer.js b/src/containers/timeline/PlayButtonContainer.js
deleted file mode 100644
index 6d4a9f25..00000000
--- a/src/containers/timeline/PlayButtonContainer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import {connect} from "react-redux";
-import {pauseSimulation, playSimulation} from "../../actions/simulation/playback";
-import PlayButtonComponent from "../../components/timeline/PlayButtonComponent";
-
-const mapStateToProps = state => {
-    return {
-        isPlaying: state.isPlaying,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        onPlay: () => dispatch(playSimulation()),
-        onPause: () => dispatch(pauseSimulation()),
-    };
-};
-
-const PlayButtonContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(PlayButtonComponent);
-
-export default PlayButtonContainer;
diff --git a/src/containers/timeline/TimelineContainer.js b/src/containers/timeline/TimelineContainer.js
deleted file mode 100644
index d52d5477..00000000
--- a/src/containers/timeline/TimelineContainer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {connect} from "react-redux";
-import {pauseSimulation} from "../../actions/simulation/playback";
-import {incrementTick} from "../../actions/simulation/tick";
-import {setCurrentDatacenter} from "../../actions/topology/building";
-import TimelineComponent from "../../components/timeline/TimelineComponent";
-
-const mapStateToProps = state => {
-    let sections = [];
-    if (state.currentExperimentId !== -1) {
-        const sectionIds = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId].sectionIds;
-
-        if (sectionIds) {
-            sections = sectionIds.map(sectionId => state.objects.section[sectionId]);
-        }
-    }
-
-    return {
-        isPlaying: state.isPlaying,
-        currentTick: state.currentTick,
-        lastSimulatedTick: state.lastSimulatedTick,
-        currentDatacenterId: state.currentDatacenterId,
-        sections,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        incrementTick: () => dispatch(incrementTick()),
-        pauseSimulation: () => dispatch(pauseSimulation()),
-        setCurrentDatacenter: id => dispatch(setCurrentDatacenter(id))
-    };
-};
-
-const TimelineContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(TimelineComponent);
-
-export default TimelineContainer;
diff --git a/src/containers/timeline/TimelineControlsContainer.js b/src/containers/timeline/TimelineControlsContainer.js
deleted file mode 100644
index e7f27fbf..00000000
--- a/src/containers/timeline/TimelineControlsContainer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {connect} from "react-redux";
-import {goToTick} from "../../actions/simulation/tick";
-import TimelineControlsComponent from "../../components/timeline/TimelineControlsComponent";
-
-const mapStateToProps = state => {
-    let sectionTicks = [];
-    if (state.currentExperimentId !== -1) {
-        const sectionIds = state.objects.path[state.objects.experiment[state.currentExperimentId].pathId].sectionIds;
-        if (sectionIds) {
-            sectionTicks = sectionIds
-                .filter(sectionId => state.objects.section[sectionId].startTick !== 0)
-                .map(sectionId => state.objects.section[sectionId].startTick);
-        }
-    }
-
-    return {
-        currentTick: state.currentTick,
-        lastSimulatedTick: state.lastSimulatedTick,
-        sectionTicks,
-    };
-};
-
-const mapDispatchToProps = dispatch => {
-    return {
-        goToTick: (tick) => dispatch(goToTick(tick)),
-    };
-};
-
-const TimelineControlsContainer = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(TimelineControlsComponent);
-
-export default TimelineControlsContainer;
diff --git a/src/containers/timeline/TimelineLabelsContainer.js b/src/containers/timeline/TimelineLabelsContainer.js
deleted file mode 100644
index b6ff0774..00000000
--- a/src/containers/timeline/TimelineLabelsContainer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {connect} from "react-redux";
-import TimelineLabelsComponent from "../../components/timeline/TimelineLabelsComponent";
-
-const mapStateToProps = state => {
-    return {
-        currentTick: state.currentTick,
-        lastSimulatedTick: state.lastSimulatedTick,
-    };
-};
-
-const TimelineLabelsContainer = connect(
-    mapStateToProps
-)(TimelineLabelsComponent);
-
-export default TimelineLabelsContainer;
diff --git a/src/pages/App.js b/src/pages/App.js
index 583b9476..801aefcd 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -6,19 +6,19 @@ import {ShortcutManager} from "react-shortcuts";
 import {openExperimentSucceeded} from "../actions/experiments";
 import {openSimulationSucceeded} from "../actions/simulations";
 import {resetCurrentDatacenter} from "../actions/topology/building";
-import ToolPanelComponent from "../components/map/controls/ToolPanelComponent";
-import LoadingScreen from "../components/map/LoadingScreen";
+import ToolPanelComponent from "../components/app/map/controls/ToolPanelComponent";
+import LoadingScreen from "../components/app/map/LoadingScreen";
+import SimulationSidebarComponent from "../components/app/sidebars/simulation/SimulationSidebarComponent";
 import AppNavbar from "../components/navigation/AppNavbar";
-import SimulationSidebarComponent from "../components/sidebars/simulation/SimulationSidebarComponent";
-import ScaleIndicatorContainer from "../containers/map/controls/ScaleIndicatorContainer";
-import MapStage from "../containers/map/MapStage";
+import ScaleIndicatorContainer from "../containers/app/map/controls/ScaleIndicatorContainer";
+import MapStage from "../containers/app/map/MapStage";
+import TopologySidebar from "../containers/app/sidebars/topology/TopologySidebar";
+import TimelineContainer from "../containers/app/timeline/TimelineContainer";
 import DeleteMachineModal from "../containers/modals/DeleteMachineModal";
 import DeleteRackModal from "../containers/modals/DeleteRackModal";
 import DeleteRoomModal from "../containers/modals/DeleteRoomModal";
 import EditRackNameModal from "../containers/modals/EditRackNameModal";
 import EditRoomNameModal from "../containers/modals/EditRoomNameModal";
-import TopologySidebar from "../containers/sidebars/topology/TopologySidebar";
-import TimelineContainer from "../containers/timeline/TimelineContainer";
 import KeymapConfiguration from "../shortcuts/keymap";
 
 const shortcutManager = new ShortcutManager(KeymapConfiguration);
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 6a3e03af..12f02e4b 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -26,7 +26,7 @@ import {
     DEFAULT_RACK_POWER_CAPACITY,
     DEFAULT_RACK_SLOT_CAPACITY,
     MAX_NUM_UNITS_PER_MACHINE
-} from "../components/map/MapConstants";
+} from "../components/app/map/MapConstants";
 import {
     fetchAndStoreAllCPUs,
     fetchAndStoreAllGPUs,
diff --git a/src/store/middlewares/viewport-adjustment.js b/src/store/middlewares/viewport-adjustment.js
index e5500d5e..fddbf038 100644
--- a/src/store/middlewares/viewport-adjustment.js
+++ b/src/store/middlewares/viewport-adjustment.js
@@ -6,7 +6,7 @@ import {
     SIDEBAR_WIDTH,
     TILE_SIZE_IN_PIXELS,
     VIEWPORT_PADDING
-} from "../../components/map/MapConstants";
+} from "../../components/app/map/MapConstants";
 import {calculateRoomListBounds} from "../../util/tile-calculations";
 
 export const viewportAdjustmentMiddleware = store => next => action => {
-- 
cgit v1.2.3