From 10665e285b4b6f78b977b8f8fc0549a2bbab84cb Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Thu, 21 Sep 2017 23:07:38 +0200
Subject: Add load color legend

---
 .../simulation/ExperimentMetadataComponent.js      |  6 ++--
 .../sidebars/simulation/LoadMetricComponent.js     | 33 ++++++++++++++++++++++
 .../simulation/SimulationSidebarComponent.js       |  3 +-
 .../sidebars/simulation/LoadMetricContainer.js     | 14 +++++++++
 src/util/simulation-load.js                        |  6 ++++
 5 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/components/sidebars/simulation/LoadMetricComponent.js
 create mode 100644 src/containers/sidebars/simulation/LoadMetricContainer.js

diff --git a/src/components/sidebars/simulation/ExperimentMetadataComponent.js b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
index 26383d6a..3649045b 100644
--- a/src/components/sidebars/simulation/ExperimentMetadataComponent.js
+++ b/src/components/sidebars/simulation/ExperimentMetadataComponent.js
@@ -3,9 +3,9 @@ import React from "react";
 const ExperimentMetadataComponent = ({experimentName, pathName, traceName, schedulerName}) => (
     <div>
         <h2>{experimentName}</h2>
-        <p><strong>Path:</strong> {pathName}</p>
-        <p><strong>Trace:</strong> {traceName}</p>
-        <p><strong>Scheduler:</strong> {schedulerName}</p>
+        <p>Path: <strong>{pathName}</strong></p>
+        <p>Trace: <strong>{traceName}</strong></p>
+        <p>Scheduler: <strong>{schedulerName}</strong></p>
     </div>
 );
 
diff --git a/src/components/sidebars/simulation/LoadMetricComponent.js b/src/components/sidebars/simulation/LoadMetricComponent.js
new file mode 100644
index 00000000..19b9927b
--- /dev/null
+++ b/src/components/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 "../../../colors/index";
+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
index 7da064c4..5cb83c2c 100644
--- a/src/components/sidebars/simulation/SimulationSidebarComponent.js
+++ b/src/components/sidebars/simulation/SimulationSidebarComponent.js
@@ -1,5 +1,6 @@
 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";
@@ -9,7 +10,7 @@ const SimulationSidebarComponent = () => {
         <Sidebar isRight={false}>
             <div className="simulation-sidebar-container flex-column">
                 <ExperimentMetadataContainer/>
-                <hr/>
+                <LoadMetricContainer/>
                 <div className="trace-container">
                     <TraceContainer/>
                 </div>
diff --git a/src/containers/sidebars/simulation/LoadMetricContainer.js b/src/containers/sidebars/simulation/LoadMetricContainer.js
new file mode 100644
index 00000000..71a50163
--- /dev/null
+++ b/src/containers/sidebars/simulation/LoadMetricContainer.js
@@ -0,0 +1,14 @@
+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/util/simulation-load.js b/src/util/simulation-load.js
index 224dc6f4..55c37929 100644
--- a/src/util/simulation-load.js
+++ b/src/util/simulation-load.js
@@ -1,5 +1,11 @@
 import {SIM_HIGH_COLOR, SIM_LOW_COLOR, SIM_MID_HIGH_COLOR, SIM_MID_LOW_COLOR} from "../colors/index";
 
+export const LOAD_NAME_MAP = {
+    LOAD: "computational load",
+    TEMPERATURE: "temperature",
+    MEMORY: "memory use",
+};
+
 export function convertLoadToSimulationColor(load) {
     if (load <= 0.25) {
         return SIM_LOW_COLOR;
-- 
cgit v1.2.3