Manually generate IDs

5 files changed, 186 insertions, 186 deletions

diff --git a/frontend/src/components/app/timeline/PlayButtonComponent.js b/frontend/src/components/app/timeline/PlayButtonComponent.js
index 1a9b0ced..7968c68d 100644
--- a/frontend/src/components/app/timeline/PlayButtonComponent.js
+++ b/frontend/src/components/app/timeline/PlayButtonComponent.js
@@ -1,30 +1,30 @@
-import React from "react";
+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>
-);
+                                 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;
+export default PlayButtonComponent
diff --git a/frontend/src/components/app/timeline/Timeline.sass b/frontend/src/components/app/timeline/Timeline.sass
index 4c99a218..2d2cb979 100644
--- a/frontend/src/components/app/timeline/Timeline.sass
+++ b/frontend/src/components/app/timeline/Timeline.sass
@@ -7,110 +7,110 @@ $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
+    display: block
+    position: absolute
+    left: 0
+    bottom: 20px
+    width: 100%
+    text-align: center
+    z-index: 2000
 
-  pointer-events: none
+    pointer-events: none
 
 .timeline-container
-  display: inline-block
-  margin: 0 auto
-  text-align: left
+    display: inline-block
+    margin: 0 auto
+    text-align: left
 
-  width: $container-size
+    width: $container-size
 
 .timeline-labels
-  display: block
-  height: 25px
-  line-height: 25px
+    display: block
+    height: 25px
+    line-height: 25px
 
-  div
-    display: inline-block
+    div
+        display: inline-block
 
-  .start-time-label
-    margin-left: $play-btn-size - $border-width
-    padding-left: 4px
+    .start-time-label
+        margin-left: $play-btn-size - $border-width
+        padding-left: 4px
 
-  .end-time-label
-    padding-right: 4px
-    float: right
+    .end-time-label
+        padding-right: 4px
+        float: right
 
 .timeline-controls
-  display: flex
-  border: $timeline-border
-  overflow: hidden
+    display: flex
+    border: $timeline-border
+    overflow: hidden
 
-  pointer-events: all
+    pointer-events: all
 
-  +border-radius($standard-border-radius)
+    +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
+    .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
+        font-size: 16pt
+        background: #333
+        color: #eee
 
-    +transition(background, $transition-length)
-    +user-select
-    +clickable
+        +transition(background, $transition-length)
+        +user-select
+        +clickable
 
-  .play-btn:hover
-    background: #656565
+    .play-btn:hover
+        background: #656565
 
-  .play-btn:active
-    background: #000
+    .play-btn:active
+        background: #000
 
-  .timeline
-    position: relative
-    flex: 1
-    height: $play-btn-size
-    line-height: $play-btn-size
-    float: right
+    .timeline
+        position: relative
+        flex: 1
+        height: $play-btn-size
+        line-height: $play-btn-size
+        float: right
 
-    background: $blue-light
+        background: $blue-light
 
-    z-index: 500
+        z-index: 500
 
-    div
-      +transition(all, $transition-length)
+        div
+            +transition(all, $transition-length)
 
-    .time-marker
-      position: absolute
-      top: 0
-      left: 0
+        .time-marker
+            position: absolute
+            top: 0
+            left: 0
 
-      width: 6px
-      height: 100%
+            width: 6px
+            height: 100%
 
-      background: $blue-very-dark
+            background: $blue-very-dark
 
-      +border-radius(2px)
+            +border-radius(2px)
 
-      z-index: 503
+            z-index: 503
 
-      pointer-events: none
+            pointer-events: none
 
-    .section-marker
-      position: absolute
-      top: 0
-      left: 0
+        .section-marker
+            position: absolute
+            top: 0
+            left: 0
 
-      width: 3px
-      height: 100%
+            width: 3px
+            height: 100%
 
-      background: #222222
+            background: #222222
 
-      z-index: 504
+            z-index: 504
 
-      pointer-events: none
+            pointer-events: none
diff --git a/frontend/src/components/app/timeline/TimelineComponent.js b/frontend/src/components/app/timeline/TimelineComponent.js
index 0f88b8f4..c183c0e8 100644
--- a/frontend/src/components/app/timeline/TimelineComponent.js
+++ b/frontend/src/components/app/timeline/TimelineComponent.js
@@ -1,37 +1,37 @@
-import React from "react";
-import TimelineControlsContainer from "../../../containers/app/timeline/TimelineControlsContainer";
-import TimelineLabelsContainer from "../../../containers/app/timeline/TimelineLabelsContainer";
-import "./Timeline.css";
+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;
-      }
+    componentDidMount() {
+        this.interval = setInterval(() => {
+            if (!this.props.isPlaying) {
+                return
+            }
 
-      if (this.props.currentTick < this.props.lastSimulatedTick) {
-        this.props.incrementTick();
-      } else {
-        this.props.pauseSimulation();
-      }
-    }, 1000);
-  }
+            if (this.props.currentTick < this.props.lastSimulatedTick) {
+                this.props.incrementTick()
+            } else {
+                this.props.pauseSimulation()
+            }
+        }, 1000)
+    }
 
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
+    componentWillUnmount() {
+        clearInterval(this.interval)
+    }
 
-  render() {
-    return (
-      <div className="timeline-bar">
-        <div className="timeline-container">
-          <TimelineLabelsContainer />
-          <TimelineControlsContainer />
-        </div>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div className="timeline-bar">
+                <div className="timeline-container">
+                    <TimelineLabelsContainer/>
+                    <TimelineControlsContainer/>
+                </div>
+            </div>
+        )
+    }
 }
 
-export default TimelineComponent;
+export default TimelineComponent
diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js
index f3d55154..5412b1f5 100644
--- a/frontend/src/components/app/timeline/TimelineControlsComponent.js
+++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js
@@ -1,49 +1,49 @@
-import React from "react";
-import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer";
-import { convertTickToPercentage } from "../../../util/timeline";
+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);
-  }
+    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>
-    );
-  }
+    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;
+export default TimelineControlsComponent
diff --git a/frontend/src/components/app/timeline/TimelineLabelsComponent.js b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
index 6943a86f..55818d24 100644
--- a/frontend/src/components/app/timeline/TimelineLabelsComponent.js
+++ b/frontend/src/components/app/timeline/TimelineLabelsComponent.js
@@ -1,15 +1,15 @@
-import React from "react";
-import { convertSecondsToFormattedTime } from "../../../util/date-time";
+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 className="timeline-labels">
+        <div className="start-time-label">
+            {convertSecondsToFormattedTime(currentTick)}
+        </div>
+        <div className="end-time-label">
+            {convertSecondsToFormattedTime(lastSimulatedTick)}
+        </div>
     </div>
-    <div className="end-time-label">
-      {convertSecondsToFormattedTime(lastSimulatedTick)}
-    </div>
-  </div>
-);
+)
 
-export default TimelineLabelsComponent;
+export default TimelineLabelsComponent