From 262a3ea510af4fef615106e0b7a160a9438ca642 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 3 Nov 2017 15:58:25 +0100
Subject: Show more accurate alert while loading exp.s

---
 .../experiments/ExperimentListComponent.js         | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/experiments/ExperimentListComponent.js b/src/components/experiments/ExperimentListComponent.js
index 28c06f29..2f7106e5 100644
--- a/src/components/experiments/ExperimentListComponent.js
+++ b/src/components/experiments/ExperimentListComponent.js
@@ -2,15 +2,30 @@ import PropTypes from "prop-types";
 import React from "react";
 import ExperimentRowContainer from "../../containers/experiments/ExperimentRowContainer";
 
-const ExperimentListComponent = ({ experimentIds }) => {
+const ExperimentListComponent = ({ experimentIds, loading }) => {
+  let alert;
+
+  if (loading) {
+    alert = (
+      <div className="alert alert-success">
+        <span className="fa fa-refresh fa-spin mr-2" />
+        <strong>Loading Experiments...</strong>
+      </div>
+    );
+  } else if (experimentIds.length === 0 && !loading) {
+    alert = (
+      <div className="alert alert-info">
+        <span className="fa fa-question-circle mr-2" />
+        <strong>No experiments here yet...</strong> Add some with the button
+        below!
+      </div>
+    );
+  }
+
   return (
     <div className="vertically-expanding-container">
-      {experimentIds.length === 0 ? (
-        <div className="alert alert-info">
-          <span className="info-icon fa fa-question-circle mr-2" />
-          <strong>No experiments here yet...</strong> Add some with the button
-          below!
-        </div>
+      {alert ? (
+        alert
       ) : (
         <table className="table table-striped">
           <thead>
@@ -37,7 +52,8 @@ const ExperimentListComponent = ({ experimentIds }) => {
 };
 
 ExperimentListComponent.propTypes = {
-  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired
+  experimentIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  loading: PropTypes.bool
 };
 
 export default ExperimentListComponent;
-- 
cgit v1.2.3


From d6f2296d60399fa0156c3908fa63e61fb0e3b4bf Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 3 Nov 2017 21:55:14 +0100
Subject: Add label to current tick line in state charts

This vertically-oriented label gives the user an indication of what that blue bar actually means in the graph, for the case that this was not clear from the UI itself.

Fixes #31
---
 src/components/app/sidebars/elements/LoadChartComponent.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/app/sidebars/elements/LoadChartComponent.js b/src/components/app/sidebars/elements/LoadChartComponent.js
index 6f66010e..5f0d40cb 100644
--- a/src/components/app/sidebars/elements/LoadChartComponent.js
+++ b/src/components/app/sidebars/elements/LoadChartComponent.js
@@ -4,6 +4,7 @@ import SvgSaver from "svgsaver";
 import {
   VictoryAxis,
   VictoryChart,
+  VictoryLabel,
   VictoryLine,
   VictoryScatter
 } from "victory";
@@ -56,9 +57,17 @@ const VictoryChartComponent = ({ data, currentTick, showCurrentTick }) => (
     <VictoryScatter data={data} />
     {showCurrentTick ? (
       <VictoryLine
+        labelComponent={
+          <VictoryLabel renderInPortal angle={90} dy={-5} dx={60} />
+        }
         data={[{ x: currentTick + 1, y: 0 }, { x: currentTick + 1, y: 1 }]}
+        labels={point =>
+          point.y === 1
+            ? "Current tick : " + convertSecondsToFormattedTime(currentTick)
+            : ""}
         style={{
-          data: { stroke: "#00A6D6", strokeWidth: 3 }
+          data: { stroke: "#00A6D6", strokeWidth: 4 },
+          labels: { fill: "#00A6D6" }
         }}
       />
     ) : (
-- 
cgit v1.2.3