From b4bdf9fde013bb7ff9579693b64ff575f7b00e44 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Tue, 7 Jul 2020 09:55:10 +0200
Subject: Rename simulations to projects and remove experiment view

---
 .../src/components/app/map/groups/RackGroup.js     |  12 +--
 .../src/components/app/map/groups/TileGroup.js     |   5 +-
 .../app/sidebars/elements/LoadBarComponent.js      |  22 ----
 .../simulation/ExperimentMetadataComponent.js      |  23 ----
 .../app/sidebars/simulation/LoadMetricComponent.js |  35 -------
 .../simulation/SimulationSidebarComponent.js       |  18 ----
 .../simulation/SimulationSidebarComponent.sass     |   8 --
 .../topology/building/BuildingSidebarComponent.js  |  11 +-
 .../topology/machine/MachineSidebarComponent.js    |  13 +--
 .../app/sidebars/topology/machine/UnitComponent.js |  12 +--
 .../sidebars/topology/machine/UnitListComponent.js |  12 +--
 .../sidebars/topology/machine/UnitTabsComponent.js |  10 +-
 .../sidebars/topology/rack/EmptySlotComponent.js   |  14 +--
 .../app/sidebars/topology/rack/MachineComponent.js |   9 +-
 .../sidebars/topology/rack/RackSidebarComponent.js |  15 +--
 .../sidebars/topology/room/RoomSidebarComponent.js |  19 +---
 .../components/app/timeline/PlayButtonComponent.js |  30 ------
 frontend/src/components/app/timeline/Timeline.sass | 116 ---------------------
 .../components/app/timeline/TimelineComponent.js   |  37 -------
 .../app/timeline/TimelineControlsComponent.js      |  36 -------
 .../app/timeline/TimelineLabelsComponent.js        |  15 ---
 21 files changed, 33 insertions(+), 439 deletions(-)
 delete mode 100644 frontend/src/components/app/sidebars/elements/LoadBarComponent.js
 delete mode 100644 frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
 delete mode 100644 frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
 delete mode 100644 frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
 delete mode 100644 frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
 delete mode 100644 frontend/src/components/app/timeline/PlayButtonComponent.js
 delete mode 100644 frontend/src/components/app/timeline/Timeline.sass
 delete mode 100644 frontend/src/components/app/timeline/TimelineComponent.js
 delete mode 100644 frontend/src/components/app/timeline/TimelineControlsComponent.js
 delete mode 100644 frontend/src/components/app/timeline/TimelineLabelsComponent.js

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

diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 6de939a9..5d4ee5e2 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -4,23 +4,17 @@ import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFi
 import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer'
 import Shapes from '../../../../shapes/index'
 import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
-import { convertLoadToSimulationColor } from '../../../../util/simulation-load'
 import TileObject from '../elements/TileObject'
 
-const RackGroup = ({ tile, inSimulation, rackLoad }) => {
-    let color = RACK_BACKGROUND_COLOR
-    if (inSimulation && rackLoad >= 0) {
-        color = convertLoadToSimulationColor(rackLoad)
-    }
-
+const RackGroup = ({ tile }) => {
     return (
         <Group>
             <TileObject
                 positionX={tile.positionX}
                 positionY={tile.positionY}
-                color={color}
+                color={RACK_BACKGROUND_COLOR}
             />
-            <Group opacity={inSimulation ? 0.3 : 1}>
+            <Group>
                 <RackSpaceFillContainer
                     tileId={tile._id}
                     positionX={tile.positionX}
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index 54f4ae17..e984f05b 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -4,10 +4,9 @@ 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 }) => {
+const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
     let tileObject
     if (tile.rackId) {
         tileObject = <RackContainer tile={tile}/>
@@ -18,8 +17,6 @@ const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => {
     let color = ROOM_DEFAULT_COLOR
     if (newTile) {
         color = ROOM_IN_CONSTRUCTION_COLOR
-    } else if (inSimulation && roomLoad >= 0) {
-        color = convertLoadToSimulationColor(roomLoad)
     }
 
     return (
diff --git a/frontend/src/components/app/sidebars/elements/LoadBarComponent.js b/frontend/src/components/app/sidebars/elements/LoadBarComponent.js
deleted file mode 100644
index 01005085..00000000
--- a/frontend/src/components/app/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/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js b/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
deleted file mode 100644
index 30990a13..00000000
--- a/frontend/src/components/app/sidebars/simulation/ExperimentMetadataComponent.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-
-const ExperimentMetadataComponent = ({
-                                         experimentName,
-                                         topologyName,
-                                         traceName,
-                                         schedulerName,
-                                     }) => (
-    <div>
-        <h2>{experimentName}</h2>
-        <p>
-            Topology: <strong>{topologyName}</strong>
-        </p>
-        <p>
-            Trace: <strong>{traceName}</strong>
-        </p>
-        <p>
-            Scheduler: <strong>{schedulerName}</strong>
-        </p>
-    </div>
-)
-
-export default ExperimentMetadataComponent
diff --git a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js b/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
deleted file mode 100644
index 6ee6a3b9..00000000
--- a/frontend/src/components/app/sidebars/simulation/LoadMetricComponent.js
+++ /dev/null
@@ -1,35 +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/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
deleted file mode 100644
index dba75eb2..00000000
--- a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import ExperimentMetadataContainer from '../../../../containers/app/sidebars/simulation/ExperimentMetadataContainer'
-import LoadMetricContainer from '../../../../containers/app/sidebars/simulation/LoadMetricContainer'
-import Sidebar from '../Sidebar'
-import './SimulationSidebarComponent.css'
-
-const SimulationSidebarComponent = () => {
-    return (
-        <Sidebar isRight={false}>
-            <div className="simulation-sidebar-container flex-column">
-                <ExperimentMetadataContainer/>
-                <LoadMetricContainer/>
-            </div>
-        </Sidebar>
-    )
-}
-
-export default SimulationSidebarComponent
diff --git a/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass b/frontend/src/components/app/sidebars/simulation/SimulationSidebarComponent.sass
deleted file mode 100644
index 6490cf8d..00000000
--- a/frontend/src/components/app/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/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
index 00965c18..4cc87798 100644
--- a/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/building/BuildingSidebarComponent.js
@@ -2,18 +2,11 @@ import React from 'react'
 import NewRoomConstructionContainer
     from '../../../../../containers/app/sidebars/topology/building/NewRoomConstructionContainer'
 
-const BuildingSidebarComponent = ({ inSimulation }) => {
+const BuildingSidebarComponent = () => {
     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/>
-            )}
+            <NewRoomConstructionContainer/>
         </div>
     )
 }
diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index 66c8c84f..d78c20eb 100644
--- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -1,24 +1,15 @@
 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 }) => {
+const MachineSidebarComponent = ({ machineId }) => {
     return (
         <div>
             <MachineNameContainer/>
             <BackToRackContainer/>
-            {inSimulation ? (
-                <div>
-                    <LoadBarContainer objectType="machine" objectId={machineId}/>
-                    <LoadChartContainer objectType="machine" objectId={machineId}/>
-                </div>
-            ) : (
-                <DeleteMachineContainer/>
-            )}
+            <DeleteMachineContainer/>
             <UnitTabsContainer/>
         </div>
     )
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
index bde6d444..3953347a 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -53,14 +53,10 @@ class UnitComponent extends React.Component {
                         data-content={unitInfo}
                         data-html="true"
                     />
-                    {this.props.inSimulation ? (
-                        undefined
-                    ) : (
-                        <span
-                            className="btn btn-outline-danger fa fa-trash"
-                            onClick={this.props.onDelete}
-                        />
-                    )}
+                    <span
+                        className="btn btn-outline-danger fa fa-trash"
+                        onClick={this.props.onDelete}
+                    />
                 </span>
             </li>
         )
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
index da65da23..fcd3e03b 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
 
-const UnitListComponent = ({ unitType, unitIds, inSimulation }) => (
+const UnitListComponent = ({ unitType, unitIds }) => (
     <ul className="list-group mt-1">
         {unitIds.length !== 0 ? (
             unitIds.map((unitId, index) => (
@@ -14,13 +14,9 @@ const UnitListComponent = ({ unitType, unitIds, inSimulation }) => (
             ))
         ) : (
             <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>
-                )}
+                <span>
+                    <strong>No units...</strong> Add some with the menu above!
+                </span>
             </div>
         )}
     </ul>
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index df7eeb77..c774036f 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -2,7 +2,7 @@ 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 }) => (
+const UnitTabsComponent = () => (
     <div>
         <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
             <li className="nav-item">
@@ -43,19 +43,19 @@ const UnitTabsComponent = ({ inSimulation }) => (
         </ul>
         <div className="tab-content">
             <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>}
+                <UnitAddContainer unitType="cpu"/>
                 <UnitListContainer unitType="cpu"/>
             </div>
             <div className="tab-pane" id="gpu-units" role="tabpanel">
-                {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>}
+                <UnitAddContainer unitType="gpu"/>
                 <UnitListContainer unitType="gpu"/>
             </div>
             <div className="tab-pane" id="memory-units" role="tabpanel">
-                {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>}
+                <UnitAddContainer unitType="memory"/>
                 <UnitListContainer unitType="memory"/>
             </div>
             <div className="tab-pane" id="storage-units" role="tabpanel">
-                {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>}
+                <UnitAddContainer unitType="storage"/>
                 <UnitListContainer unitType="storage"/>
             </div>
         </div>
diff --git a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
index f182a78c..03b44aa6 100644
--- a/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/EmptySlotComponent.js
@@ -1,18 +1,14 @@
 import React from 'react'
 
-const EmptySlotComponent = ({ position, onAdd, inSimulation }) => (
+const EmptySlotComponent = ({ position, onAdd }) => (
     <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>
-        )}
+        <button className="btn btn-outline-primary" onClick={onAdd}>
+            <span className="fa fa-plus mr-2"/>
+            Add machine
+        </button>
     </li>
 )
 
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
index b4204136..cec3c912 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import Shapes from '../../../../../shapes'
-import { convertLoadToSimulationColor } from '../../../../../util/simulation-load'
 
 const UnitIcon = ({ id, type }) => (
     <div>
@@ -16,14 +15,8 @@ const UnitIcon = ({ id, type }) => (
 const MachineComponent = ({
                               position,
                               machine,
-                              inSimulation,
-                              machineLoad,
                               onClick,
                           }) => {
-    let color = 'white'
-    if (inSimulation && machineLoad >= 0) {
-        color = convertLoadToSimulationColor(machineLoad)
-    }
     const hasNoUnits =
         machine.cpuIds.length +
         machine.gpuIds.length +
@@ -35,7 +28,7 @@ const MachineComponent = ({
         <li
             className="d-flex list-group-item list-group-item-action justify-content-between align-items-center"
             onClick={onClick}
-            style={{ backgroundColor: color }}
+            style={{ backgroundColor: 'white' }}
         >
             <span className="badge badge-default badge-info mr-1">{position}</span>
             <div className="d-inline-flex">
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index 47d99254..23e8e743 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -1,28 +1,17 @@
 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 }) => {
+const RackSidebarComponent = () => {
     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>
-                )}
+                <DeleteRackContainer/>
             </div>
             <div className="machine-list-container mt-2">
                 <MachineListContainer/>
diff --git a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index d8a805cb..a23ac381 100644
--- a/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,29 +1,18 @@
 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 EditRoomContainer from '../../../../../containers/app/sidebars/topology/room/EditRoomContainer'
 import RackConstructionContainer from '../../../../../containers/app/sidebars/topology/room/RackConstructionContainer'
 import RoomNameContainer from '../../../../../containers/app/sidebars/topology/room/RoomNameContainer'
 
-const RoomSidebarComponent = ({ roomId, inSimulation }) => {
+const RoomSidebarComponent = () => {
     return (
         <div>
             <RoomNameContainer/>
             <BackToBuildingContainer/>
-            {inSimulation ? (
-                <div>
-                    <LoadBarContainer objectType="room" objectId={roomId}/>
-                    <LoadChartContainer objectType="room" objectId={roomId}/>
-                </div>
-            ) : (
-                <div>
-                    <RackConstructionContainer/>
-                    <EditRoomContainer/>
-                    <DeleteRoomContainer/>
-                </div>
-            )}
+            <RackConstructionContainer/>
+            <EditRoomContainer/>
+            <DeleteRoomContainer/>
         </div>
     )
 }
diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js
deleted file mode 100644
index 7968c68d..00000000
--- a/frontend/src/components/app/timeline/PlayButtonComponent.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-const PlayButtonComponent = ({
-                                 isPlaying,
-                                 currentTick,
-                                 lastSimulatedTick,
-                                 onPlay,
-                                 onPause,
-                             }) => (
-    <div
-        className="play-btn"
-        onClick={() => {
-            if (isPlaying) {
-                onPause()
-            } else {
-                if (currentTick !== lastSimulatedTick) {
-                    onPlay()
-                }
-            }
-        }}
-    >
-        {isPlaying ? (
-            <span className="fa fa-pause"/>
-        ) : (
-            <span className="fa fa-play"/>
-        )}
-    </div>
-)
-
-export default PlayButtonComponent
diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass
deleted file mode 100644
index 2d2cb979..00000000
--- a/frontend/src/components/app/timeline/Timeline.sass
+++ /dev/null
@@ -1,116 +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
-
-            pointer-events: none
-
-        .section-marker
-            position: absolute
-            top: 0
-            left: 0
-
-            width: 3px
-            height: 100%
-
-            background: #222222
-
-            z-index: 504
-
-            pointer-events: none
diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js
deleted file mode 100644
index c183c0e8..00000000
--- a/frontend/src/components/app/timeline/TimelineComponent.js
+++ /dev/null
@@ -1,37 +0,0 @@
-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/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js
deleted file mode 100644
index 01911aff..00000000
--- a/frontend/src/components/app/timeline/TimelineControlsComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-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,
-                            ),
-                        }}
-                    />
-                </div>
-            </div>
-        )
-    }
-}
-
-export default TimelineControlsComponent
diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
deleted file mode 100644
index 55818d24..00000000
--- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js
+++ /dev/null
@@ -1,15 +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
-- 
cgit v1.2.3